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.

Placeholder Responsive image 
<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.

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

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 .

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>

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>