Source

Mfonini ahorow

Nwoma ne nhwɛsoɔ a wɔde bɛpaw mfonini ahodoɔ akɔ suban a ɛyɛ mmuaeɛ mu (enti ɛrenyɛ akɛseɛ da nsen wɔn awofoɔ elements) na wɔde styles a emu yɛ hare ka ho —ne nyinaa nam adesua ahodoɔ so.

Mfonini ahorow a ɛma mmuae

Wɔde .img-fluid. max-width: 100%;na height: auto;wɔde di dwuma wɔ mfonini no so sɛnea ɛbɛyɛ a ɛne ɔwofo element no bɛkari pɛ.

Placeholder Responsive image 
<img src="..." class="img-fluid" alt="Responsive image">
SVG mfonini ahorow ne IE 10

Wɔ Internet Explorer 10 mu no, SVG mfonini ahorow a ɛwɔ .img-fluidno kɛse a ɛnsɛ. Sɛ wopɛ sɛ wusiesie eyi a, fa ka ho width: 100% \9;wɔ baabi a ɛho hia. Saa nsiesie yi nsiesie mfonini ahorow afoforo kɛse wɔ ɔkwan a ɛnteɛ so, enti Bootstrap mfa nni dwuma ankasa.

Mfonini no ho mfonini nketewa

Wɔ yɛn border-radius utilities akyi no , wubetumi de adi dwuma .img-thumbnailde ama mfonini bi ayɛ kurukuruwa 1px border anim.

A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera 200x200 
<img src="..." alt="..." class="img-thumbnail">

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 .

Placeholder 200x200 Placeholder 200x200 
<img src="..." class="rounded float-left" alt="...">
<img src="..." class="rounded float-right" alt="...">
Placeholder 200x200 
<img src="..." class="rounded mx-auto d-block" alt="...">
Placeholder 200x200 
<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>