Гузаштан ба мундариҷаи асосӣ Ба новбари ҳуҷҷатҳо гузаред
Check
in English

Тасвирҳо

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

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

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

Placeholder Responsive image
html
<img src="..." class="img-fluid" alt="...">

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

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

A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera 200x200
html
<img src="..." class="img-thumbnail" alt="...">

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

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

Placeholder 200x200 Placeholder 200x200
html
<img src="..." class="rounded float-start" alt="...">
<img src="..." class="rounded float-end" alt="...">
Placeholder 200x200
html
<img src="..." class="rounded mx-auto d-block" alt="...">
Placeholder 200x200
html
<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:            var(--#{$prefix}border-color);
$thumbnail-border-radius:           $border-radius;
$thumbnail-box-shadow:              $box-shadow-sm;