Source

Imazhet

Dokumentacion dhe shembuj për zgjedhjen e imazheve në sjellje reaguese (kështu që ato të mos bëhen kurrë më të mëdha se elementët e tyre prindër) dhe të shtoni stile të lehta në to — të gjitha nëpërmjet klasave.

Imazhe të përgjegjshme

Imazhet në Bootstrap bëhen të përgjegjshme me .img-fluid. max-width: 100%;dhe height: auto;aplikohen në imazh në mënyrë që të shkallëzohet me elementin prind.

100% x 250 
<img src="..." class="img-fluid" alt="Responsive image">
Imazhet SVG dhe IE 10

Në Internet Explorer 10, imazhet SVG me .img-fluidjanë me madhësi joproporcionale. Për ta rregulluar këtë, shtoni width: 100% \9;aty ku është e nevojshme. Ky rregullim i përmason në mënyrë të gabuar formatet e tjera të imazhit, kështu që Bootstrap nuk e zbaton atë automatikisht.

Miniaturat e imazhit

Përveç shërbimeve tona të rrezes kufitare , mund t'i përdorni .img-thumbnailpër t'i dhënë një imazhi një pamje të rrumbullakosur të kufirit 1 px.

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

Përafrimi i imazheve

Përafroni imazhet me klasat float ndihmëse ose klasat e shtrirjes së tekstit . blockImazhet e nivelit mund të përqendrohen duke përdorur klasën e përdorimit të .mx-automarzhit .

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

Nëse po përdorni <picture>elementin për të specifikuar elementë të shumtë <source>për një specifik <img>, sigurohuni që t'i shtoni .img-*klasat në etiketë <img>dhe jo në <picture>etiketë.

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