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 онро ба таври худкор татбиқ намекунад.

Ангораи тасвирҳо

Илова ба утилитаҳои border -radius мо , шумо метавонед истифода баред .img-thumbnail, то ба тасвир намуди сарҳадии мудавваршудаи 1px дода шавад.

200x200 
<img src="..." alt="..." class="img-thumbnail">

Ҳамоҳангсозии тасвирҳо

Тасвирҳоро бо синфҳои шинокунандаи ёрирасон ё синфҳои ҳамоҳангсозии матн мувофиқ кунед. block-тасвирҳои сатҳи метавонад бо истифода аз .mx-autoсинфи фоидаи margin марказонида шавад .

200x200 200x200 
<img src="..." class="rounded float-left" alt="...">
<img src="..." class="rounded float-right" alt="...">
200x200 
<img src="..." class="rounded mx-auto d-block" alt="...">
200x200 
<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>