Тасвирҳо
Ҳуҷҷатҳо ва мисолҳо барои интихоби тасвирҳо ба рафтори ҷавобӣ (аз ин рӯ онҳо ҳеҷ гоҳ аз волидайни худ васеътар намешаванд) ва ба онҳо сабкҳои сабук илова мекунанд - ҳама тавассути синфҳо.
Тасвирҳои ҷавобӣ
Тасвирҳо дар 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;