Source

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. max-width: 100%;kuma height: auto;ana amfani da hoton don ya daidaita tare da kashi na iyaye.

100% x250 
<img src="..." class="img-fluid" alt="Responsive image">
Hotunan SVG da IE 10

A cikin Internet Explorer 10, hotunan SVG tare .img-fluidda girman su ba su da ƙima. Don gyara wannan, ƙara width: 100% \9;inda ya cancanta. Wannan gyara bai dace da girman sauran tsarin hoto ba, don haka Bootstrap baya amfani da shi ta atomatik.

Hotunan hotuna

Baya ga abubuwan amfaninmu na radius na kan iyaka , zaku iya amfani .img-thumbnailda shi don ba da hoto siffar iyakar 1px zagaye.

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

Daidaita hotuna

Daidaita hotuna tare da azuzuwan masu iyo ko azuzuwan daidaita rubutu . blockHotunan matakin za su iya zama a tsakiya ta amfani da ajin mai amfani da .mx-autogefe .

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>

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>