Mfonini ahorow
Nwoma ne nhwɛsoɔ a wɔde bɛpaw mfonini ahodoɔ akɔ suban a ɛyɛ mmuaeɛ mu (enti ɛrentrɛw da nsen wɔn awofoɔ) na wɔde ntadeɛ a emu yɛ hare ka ho —ne nyinaa nam adesua ahodoɔ so.
Mfonini ahorow a ɛma mmuae
Wɔde .img-fluid
. Eyi fa max-width: 100%;
ne height: auto;
mfonini no ho sɛnea ɛbɛyɛ a ɛne ɔwofo no tɛtrɛtɛ bɛkari pɛ.
<img src="..." class="img-fluid" alt="...">
Mfonini no ho mfonini nketewa
Wɔ yɛn border-radius utilities akyi no , wubetumi de adi dwuma .img-thumbnail
de ama mfonini bi ayɛ kurukuruwa 1px border anim.
<img src="..." class="img-thumbnail" alt="...">
Mfonini ahorow a wɔde bɛhyehyɛ no pɛpɛɛpɛ
Fa mfonini ahorow no ne ɔboafo float adesua ahorow anaa nkyerɛwee nhyehyɛe adesua ahorow no hyia . block
-level mfonini ahorow betumi ayɛ mfinimfini denam margin utility class no so.mx-auto
.
<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>
Mfoni
Sɛ wode element no redi dwuma <picture>
de akyerɛ element ahorow pii <source>
ama pɔtee bi a <img>
, hwɛ hu sɛ wode .img-*
adesua ahorow no bɛka tag no ho <img>
na ɛnyɛ <picture>
tag no ho.
<picture>
<source srcset="..." type="image/svg+xml">
<img src="..." class="img-fluid img-thumbnail" alt="...">
</picture>
Sass
Nneɛma a Ɛsakra
Variables wɔ hɔ ma mfonini nketewa.
$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;