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.
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-thumbnail
ho 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-auto
marang-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;