Source

Imagini

Documentație și exemple pentru alegerea imaginilor într-un comportament receptiv (astfel încât să nu devină niciodată mai mari decât elementele lor părinte) și să le adauge stiluri ușoare, toate prin intermediul claselor.

Imagini receptive

Imaginile din Bootstrap sunt adaptate cu .img-fluid. max-width: 100%;și height: auto;sunt aplicate imaginii astfel încât să se scaleze cu elementul părinte.

100%x250 
<img src="..." class="img-fluid" alt="Responsive image">
Imagini SVG și IE 10

În Internet Explorer 10, imaginile SVG .img-fluidau dimensiuni disproporționate. Pentru a remedia acest lucru, adăugați width: 100% \9;acolo unde este necesar. Această remediere dimensionează incorect alte formate de imagine, așa că Bootstrap nu o aplică automat.

Miniaturi de imagine

În plus față de utilitățile noastre pentru raza de frontieră , puteți folosi .img-thumbnailpentru a da unei imagini un aspect de chenar rotunjit de 1 px.

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

Alinierea imaginilor

Aliniați imaginile cu clasele helper float sau cu clasele de aliniere a textului . blockImaginile -level pot fi centrate folosind clasa .mx-autode utilitate margine .

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>

Imagine

Dacă utilizați <picture>elementul pentru a specifica mai multe <source>elemente pentru un anumit <img>, asigurați-vă că adăugați .img-*clasele la etichetă <img>și nu la <picture>etichetă.

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