Whakaahua
Ko nga tuhinga me nga tauira mo te kowhiri i nga whakaahua ki te whanonga aro (kia kore e whanui ake i o ratau matua) me te taapiri i nga momo ahua mama ki a raatau—ma nga karaehe katoa.
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 ahua 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-thumbnail
ki 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-auto
karaehe 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: $gray-300;
$thumbnail-border-radius: $border-radius;
$thumbnail-box-shadow: $box-shadow-sm;