Source

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="Responsive image">

Imatges SVG i IE 10

A Internet Explorer 10, les imatges SVG .img-fluidtenen una mida desproporcionada. Per solucionar-ho, afegiu-ho width: 100% \9;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-thumbnailper donar a una imatge un aspecte de vora arrodonida d'1 px.

Una imatge de marcador de posició quadrada genèrica amb una vora blanca al seu voltant, fent-la semblar a una fotografia feta amb una càmera instantània antiga

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

Alineació d'imatges

Alineeu les imatges amb les classes flotants d'ajuda o les classes d'alineació de text . blockLes imatges de nivell es poden centrar mitjançant la .mx-autoclasse d'utilitat de marge .

Una imatge de marcador de posició quadrada genèrica amb cantonades arrodonides

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