Imifanekiso

Imifanekiso ephendulayo

Imifanekiso kwiBootstrap yenziwe ukuba iphendule nge .img-fluid. Oku kuyasebenza max-width: 100%;nakumfanekiso height: auto;ukuze ulinganise ngobubanzi bomzali.

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

Imifanekiselo yemifanekiso

Ukongeza kwizinto zethu zerediyasi zomda , ungasebenzisa .img-thumbnailukunika umfanekiso inkangeleko engqukuva ye-1px.

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

Ukulungelelanisa imifanekiso

Lungelelanisa imifanekiso kunye neeklasi ezidadayo zomncedisi okanye iiklasi zolungelelwaniso lombhalo . block-imifanekiso yenqanaba inokubekwa embindini kusetyenziswa udidi .mx-autooluluncedo lomda .

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

Umfanekiso

Ukuba usebenzisa <picture>isiqalelo ukukhankanya <source>izinto ezininzi zokuthile <img>, qiniseka ukuba ukongeza .img-*iiklasi kwi <img>hayi <picture>kwithegi.

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

Sass

Izinto eziguquguqukayo

Izinto eziguquguqukayo ziyafumaneka kwi-thumbnails yemifanekiso.

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