Imatges
Documentació i exemples per optar a les imatges en un comportament responsiu (de manera que mai no siguin més grans que els seus elements pare) i afegir-hi estils lleugers, tot mitjançant classes.
Imatges sensibles
Les imatges a Bootstrap es fan responsives amb .img-fluid
. max-width: 100%;
i height: auto;
s'apliquen a la imatge de manera que s'escala amb l'element pare.
<img src="..." class="img-fluid" alt="...">
Imatges SVG i Internet Explorer
A Internet Explorer 10 i 11, les imatges SVG .img-fluid
tenen una mida desproporcionada. Per solucionar-ho, afegiu width: 100%;
o .w-100
si cal. Aquesta correcció dimensiona incorrectament altres formats d'imatge, de manera que Bootstrap no l'aplica automàticament.
Miniatures d'imatge
A més de les nostres utilitats de radi de vora , podeu utilitzar .img-thumbnail
per donar a una imatge un aspecte de vora arrodonida d'1 px.
<img src="..." class="img-thumbnail" alt="...">
Alineació d'imatges
Alineeu les imatges amb les classes flotants d'ajuda o les classes d'alineació de text . block
Les imatges de nivell es poden centrar mitjançant la .mx-auto
classe d'utilitat de marge .
<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>
Imatge
Si utilitzeu l' <picture>
element per especificar diversos <source>
elements per a un determinat <img>
, assegureu-vos d'afegir les .img-*
classes a l'etiqueta <img>
i no a l' <picture>
etiqueta.
<picture>
<source srcset="..." type="image/svg+xml">
<img src="..." class="img-fluid img-thumbnail" alt="...">
</picture>