in English

Hotuna

Takaddun bayanai da misalai don zaɓin hotuna zuwa ɗabi'a mai amsawa (don haka ba su taɓa zama faɗi fiye da iyayensu ba) kuma suna ƙara salo masu nauyi a gare su-duk ta hanyar azuzuwan.

A wannan shafi

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 faɗin iyaye.

html

<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.

html

<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 .

html

<img src="..." class="rounded float-start" alt="...">
<img src="..." class="rounded float-end" alt="...">

html

<img src="..." class="rounded mx-auto d-block" alt="...">

html

<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:            var(--#{$prefix}border-color);
$thumbnail-border-radius:           $border-radius;
$thumbnail-box-shadow:              $box-shadow-sm;