Source

Duab

Cov ntaub ntawv thiab cov piv txwv rau kev xaiv cov duab rau hauv kev coj tus cwj pwm (yog li lawv tsis txhob loj dua lawv cov niam txiv cov ntsiab lus) thiab ntxiv cov qauv hnyav rau lawv - tag nrho ntawm cov chav kawm.

Teb cov duab

Cov duab hauv Bootstrap tau teb nrog .img-fluid. max-width: 100%;thiab height: auto;yog siv rau daim duab kom nws scales nrog niam txiv lub caij.

Placeholder Responsive image 
<img src="..." class="img-fluid" alt="Responsive image">
SVG cov duab thiab IE 10

Hauv Internet Explorer 10, SVG cov duab nrog .img-fluidqhov loj me me. Txhawm rau kho qhov no, ntxiv width: 100% \9;qhov tsim nyog. Qhov no kho qhov loj me me ntawm lwm hom duab, yog li Bootstrap tsis siv nws tau.

Duab thumbnails

Ntxiv rau peb cov khoom siv hluav taws xob ciam teb , koj tuaj yeem siv .img-thumbnaillos muab cov duab ib puag ncig 1px ciam teb zoo li.

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

Aligning cov duab

Teem cov duab nrog cov pab cuam ntab cov chav kawm lossis cov chav kawm nyeem ntawv . block-qib cov duab tuaj yeem nyob nruab nrab siv cov .mx-autochav kawm margin utility .

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>

Duab

Yog tias koj siv lub <picture>caij los qhia ntau lub <source>ntsiab lus rau ib qho tshwj xeeb <img>, nco ntsoov ntxiv cov .img-*chav kawm rau qhov <img>thiab tsis yog rau lub <picture>cim.

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