Source

Imaj

Dokimantasyon ak egzanp pou chwazi imaj nan konpòtman reponn (konsa yo pa janm vin pi gwo pase eleman paran yo) epi ajoute estil ki lejè nan yo-tout atravè klas yo.

Imaj reponn

Imaj nan Bootstrap yo reponn ak .img-fluid. max-width: 100%;epi height: auto;yo aplike nan imaj la pou ke li echèl ak eleman paran an.

100%x250 
<img src="..." class="img-fluid" alt="Responsive image">
Imaj SVG ak IE 10

Nan Internet Explorer 10, imaj SVG yo .img-fluidgen yon gwosè disproporsyonèl. Pou repare sa a, ajoute width: 100% \9;kote sa nesesè. Koreksyon sa a mal gwosè lòt fòma imaj, kidonk Bootstrap pa aplike li otomatikman.

Miniatures imaj

Anplis sèvis piblik fwontyè-reyon nou yo , ou ka itilize .img-thumbnailpou bay yon imaj yon aparans fwontyè awondi 1px.

200x200 
<img src="..." alt="..." class="img-thumbnail">

Aliman imaj yo

Aliman imaj yo ak klas flote asistan yo oswa klas aliyman tèks yo . block-level imaj yo ka santre lè l sèvi avèk klas sèvis .mx-autopiblik Marge .

200x200 200x200 
<img src="..." class="rounded float-left" alt="...">
<img src="..." class="rounded float-right" alt="...">
200x200 
<img src="..." class="rounded mx-auto d-block" alt="...">
200x200 
<div class="text-center">
  <img src="..." class="rounded" alt="...">
</div>

Foto

Si w ap itilize <picture>eleman nan pou presize plizyè <source>eleman pou yon espesifik <img>, asire w ke ou ajoute .img-*klas yo nan tag la <img>epi yo pa nan <picture>tag la.

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