Whakaahua

Ko nga whakaahua whakautu

Ko nga whakaahua kei Bootstrap he mea whakautu ki te .img-fluid. Ka pa tenei max-width: 100%;ki height: auto;te atahanga kia tauine ki te whanui matua.

<img src="..." class="img-fluid" alt="...">

Karakōnui whakaahua

I tua atu i o maatau taputapu-raupapa-taitapa , ka taea e koe te whakamahi .img-thumbnailki te hoatu ki tetahi ahua he ahua porotaka taitapa 1px.

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

Tirohanga whakaahua

Tiarohia nga whakaahua ki nga karaehe rewa kaiawhina, ki nga karaehe whakatika tuhinga ranei . block-Ka taea te whakatekau i nga whakaahua ma te whakamahi i te .mx-autokaraehe whaipainga tawhē .

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

Pikitia

Mēnā kei te whakamahi koe i te <picture>huānga ki te whakapūtā <source>huānga maha mō te tauwhāiti <img>, kia mahara ki te taapiri i nga .img-*karaehe ki te <img>me kaua ki te <picture>tohu.

<picture>
  <source srcset="..." type="image/svg+xml">
  <img src="..." class="img-fluid img-thumbnail" alt="...">
</picture>

Sass

Taurangi

Kei te waatea nga taurangi mo nga karakōnui atahanga.

$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;