Tsallake zuwa babban abun ciki Tsallake zuwa kewayawa na takardu
in English

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.

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

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.

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

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 .

Placeholder 200x200 Placeholder 200x200
<img src="..." class="rounded float-start" alt="...">
<img src="..." class="rounded float-end" alt="...">
Placeholder 200x200
<img src="..." class="rounded mx-auto d-block" alt="...">
Placeholder 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>

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;