immagini
Documentazione ed esempi per l'attivazione delle immagini in un comportamento reattivo (in modo che non diventino mai più grandi dei loro elementi principali) e per aggiungere loro stili leggeri, il tutto tramite classi.
Immagini reattive
Le immagini in Bootstrap sono rese responsive con .img-fluid
. max-width: 100%;
e height: auto;
vengono applicati all'immagine in modo che venga ridimensionata con l'elemento padre.
<img src="..." class="img-fluid" alt="...">
Immagini SVG e Internet Explorer
In Internet Explorer 10 e 11, le immagini SVG con .img-fluid
sono di dimensioni sproporzionate. Per risolvere questo problema, aggiungi width: 100%;
o .w-100
dove necessario. Questa correzione ridimensiona in modo errato altri formati di immagine, quindi Bootstrap non lo applica automaticamente.
Miniature delle immagini
Oltre alle nostre utilità di raggio di confine , puoi usare .img-thumbnail
per dare a un'immagine un aspetto del bordo arrotondato di 1px.
<img src="..." class="img-thumbnail" alt="...">
Allineamento delle immagini
Allinea le immagini con le classi float helper o le classi di allineamento del testo . block
le immagini a livello possono essere centrate usando la .mx-auto
classe di utilità margin .
<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>
Immagine
Se stai utilizzando l' <picture>
elemento per specificare più <source>
elementi per uno specifico <img>
, assicurati di aggiungere le .img-*
classi al tag <img>
e non al <picture>
tag.
<picture>
<source srcset="..." type="image/svg+xml">
<img src="..." class="img-fluid img-thumbnail" alt="...">
</picture>