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.
<img src="..." class="img-fluid" alt="...">
Imagini SVG și Internet Explorer
În Internet Explorer 10 și 11, imaginile SVG .img-fluid
au dimensiuni disproporționate. Pentru a remedia acest lucru, adăugați width: 100%;
sau .w-100
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-thumbnail
pentru a da unei imagini un aspect de chenar rotunjit de 1 px.
<img src="..." class="img-thumbnail" alt="...">
Alinierea imaginilor
Aliniați imaginile cu clasele helper float sau cu clasele de aliniere a textului . block
Imaginile -level pot fi centrate folosind clasa .mx-auto
de utilitate margine .
<img src="..." class="rounded float-left" alt="...">
<img src="..." class="rounded float-right" alt="...">
<img src="..." class="rounded mx-auto d-block" alt="...">
<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>