Hotuna
Takaddun bayanai da misalai don zaɓin hotuna zuwa halayen amsawa (don haka ba su taɓa zama girma fiye da abubuwan iyayensu ba) kuma suna ƙara salo mai nauyi a gare su—duk ta hanyar azuzuwan.
Hotuna masu amsawa
Hotuna a cikin Bootstrap an yi su da amsa tare da .img-fluid
. Wannan ya shafi max-width: 100%;
kuma height: auto;
ga hoton don ya daidaita tare da kashi na iyaye.
<img src="..." class="img-fluid" alt="...">
Hotunan hotuna
Baya ga abubuwan amfaninmu na radius na kan iyaka , zaku iya amfani .img-thumbnail
da shi don ba da hoto siffar iyakar 1px zagaye.
<img src="..." class="img-thumbnail" alt="...">
Daidaita hotuna
Daidaita hotuna tare da azuzuwan masu iyo ko azuzuwan daidaita rubutu . block
Hotunan matakin za su iya zama a tsakiya ta amfani da ajin mai amfani da .mx-auto
gefe .
<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>
Hoto
Idan kana amfani da <picture>
kashi don tantance <source>
abubuwa da yawa don takamaiman <img>
, tabbatar da ƙara .img-*
azuzuwan zuwa <img>
ba ga <picture>
alamar ba.
<picture>
<source srcset="..." type="image/svg+xml">
<img src="..." class="img-fluid img-thumbnail" alt="...">
</picture>
Sass
Masu canji
Akwai sauye-sauye don hoton hoto.
$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;