Source

Awọn aworan

Iwe ati awọn apẹẹrẹ fun jijade awọn aworan sinu ihuwasi idahun (nitorinaa wọn ko tobi ju awọn eroja obi wọn lọ) ati ṣafikun awọn aza iwuwo fẹẹrẹ si wọn — gbogbo nipasẹ awọn kilasi.

Awọn aworan idahun

Awọn aworan ni Bootstrap jẹ idahun pẹlu .img-fluid. max-width: 100%;ati height: auto;pe a lo si aworan naa ki o le ṣe iwọn pẹlu eroja obi.

100% x250 
<img src="..." class="img-fluid" alt="Responsive image">
Awọn aworan SVG ati IE 10

Ni Internet Explorer 10, awọn aworan SVG pẹlu .img-fluidjẹ iwọn aiṣedeede. Lati ṣatunṣe eyi, ṣafikun width: 100% \9;ni ibiti o nilo. Atunṣe yii ṣe iwọn awọn ọna kika aworan miiran ti ko tọ, nitorinaa Bootstrap ko lo laifọwọyi.

Awọn eekanna atanpako aworan

Ni afikun si awọn ohun elo redio aala wa , o le lo .img-thumbnaillati fun aworan ni irisi aala 1px yika.

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

aligning images

Ṣe afiwe awọn aworan pẹlu awọn kilasi leefofo oluranlọwọ tabi awọn kilasi titete ọrọ . blockAwọn aworan ipele le jẹ dojukọ nipa lilo kilasi .mx-autoIwUlO ala .

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>

Aworan

If you are using the <picture>element to specify multiple element <source>for a specific <img>, rii daju pe o fi awọn .img-*kilasi kun si <img>kii ṣe si <picture>tag.

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