Litšoantšo

Litokomane le mehlala ea ho khetha litšoantšo hore e be batho ba arabelang (e le hore li se ke tsa ba batsi ho feta motsoali oa bona) 'me u li kenye mekhoa e bobebe ho tsona - ka litlelase kaofela.

Leqepheng lena

Litšoantšo tse arabelang

Litšoantšo ho Bootstrap li etsoa hore li arabele ka .img-fluid. Sena se sebetsa max-width: 100%;le height: auto;ho setšoantšo e le hore se lekanye ka bophara ba motsoali.

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

Litšoantšo tsa setšoantšo

Ntle le lits'ebeletso tsa rona tsa "radius" , o ka sebelisa .img-thumbnailho fa setšoantšo ponahalo e pota-potiloeng ea 1px.

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

Ho lekanya litšoantšo

Hlophisa litšoantšo le lihlopha tsa float kapa litlelase tsa tatellano ea mongolo . block-Litšoantšo tsa boemo bo ka beoa bohareng ho sebelisoa sehlopha sa lisebelisoa tsa .mx-automarang-rang .

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

Setšoantšo

Haeba u sebelisa <picture>element ho hlakisa <source>lintlha tse ngata bakeng sa ntho e itseng <img>, etsa bonnete ba hore u kenyelletsa .img-*lihlopha ho e <img>seng ho <picture>tag.

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

Sass

Lintho tse fapaneng

Liphetoho li teng bakeng sa linepe tsa litšoantšo.

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