Тасвирҳо

Ҳуҷҷатҳо ва мисолҳо барои интихоби тасвирҳо ба рафтори ҷавобӣ (аз ин рӯ онҳо ҳеҷ гоҳ аз волидайни худ васеътар намешаванд) ва ба онҳо сабкҳои сабук илова мекунанд - ҳама тавассути синфҳо.

Дар ин саҳифа

Тасвирҳои ҷавобӣ

Тасвирҳо дар Bootstrap бо .img-fluid. Ин ба тасвир дахл дорад max-width: 100%;, height: auto;то ки он бо паҳнои волидайн миқёс кунад.

<img src="..." class="img-fluid" alt="...">

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

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

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

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

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

<img src="..." class="rounded float-start" alt="...">
<img src="..." class="rounded float-end" alt="...">

<img src="..." class="rounded mx-auto d-block" alt="...">

<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>

Сасс

Тағйирёбандаҳо

Тағирёбандаҳо барои ангораи тасвир дастрасанд.

$thumbnail-padding:                 .25rem;
$thumbnail-bg:                      $body-bg;
$thumbnail-border-width:            $border-width;
$thumbnail-border-color:            $gray-300;
$thumbnail-border-radius:           $border-radius;
$thumbnail-box-shadow:              $box-shadow-sm;