Source

រូបភាព

ឯកសារ និងឧទាហរណ៍សម្រាប់ការជ្រើសរើសរូបភាពទៅក្នុងឥរិយាបថឆ្លើយតប (ដូច្នេះពួកវាមិនដែលធំជាងធាតុមេរបស់ពួកគេទេ) ហើយបន្ថែមរចនាប័ទ្មស្រាលដល់ពួកគេ—ទាំងអស់តាមរយៈថ្នាក់។

រូបភាពដែលឆ្លើយតប

រូបភាពនៅក្នុង Bootstrap ត្រូវបានធ្វើឱ្យមានការឆ្លើយតបជាមួយ .img-fluid. max-width: 100%;ហើយ height: auto;​ត្រូវ​បាន​អនុវត្ត​ទៅ​នឹង​រូបភាព ដូច្នេះ​វា​ធ្វើ​មាត្រដ្ឋាន​ជាមួយ​ធាតុ​មេ។

100% x 250
<img src="..." class="img-fluid" alt="Responsive image">
រូបភាព SVG និង IE 10

នៅក្នុង Internet Explorer 10 រូបភាព SVG .img-fluidមានទំហំមិនសមាមាត្រ។ ដើម្បីជួសជុលនេះ បន្ថែម width: 100% \9;កន្លែងចាំបាច់។ ការជួសជុលនេះមានទំហំមិនត្រឹមត្រូវនៃទ្រង់ទ្រាយរូបភាពផ្សេងទៀត ដូច្នេះ Bootstrap មិនអនុវត្តវាដោយស្វ័យប្រវត្តិទេ។

រូបភាពតូច

បន្ថែមពីលើ ឧបករណ៍ប្រើប្រាស់ព្រំដែនកាំ របស់យើង អ្នកអាចប្រើ .img-thumbnailដើម្បីផ្តល់ឱ្យរូបភាពនូវរូបរាងស៊ុម 1px រាងមូល។

២០០x២០០
<img src="..." alt="..." class="img-thumbnail">

ការតម្រឹមរូបភាព

តម្រឹមរូបភាពជាមួយ ថ្នាក់អណ្តែតជំនួយថ្នាក់តម្រឹមអត្ថបទblockរូបភាពកម្រិតអាចត្រូវបានដាក់កណ្តាលដោយប្រើ ថ្នាក់ .mx-autoឧបករណ៍ប្រើប្រាស់រឹម

២០០x២០០ ២០០x២០០
<img src="..." class="rounded float-left" alt="...">
<img src="..." class="rounded float-right" alt="...">
២០០x២០០
<img src="..." class="rounded mx-auto d-block" alt="...">
២០០x២០០
<div class="text-center">
  <img src="..." class="rounded" alt="...">
</div>

រូបភាព

ប្រសិនបើអ្នកកំពុងប្រើ <picture>ធាតុដើម្បីបញ្ជាក់ <source>ធាតុជាច្រើនសម្រាប់ជាក់លាក់មួយ <img>ត្រូវប្រាកដថាបន្ថែម .img-*ថ្នាក់ទៅ <img>និងមិនទៅ <picture>ស្លាក។

<picture>
  <source srcset="..." type="image/svg+xml">
  <img src="..." class="img-fluid img-thumbnail" alt="...">
</picture>