Immagini

Inserisci immagini responsive, che quindi non diventano mai più grandi dei loro elementi genitore

Le immagini sono rese responsive con la classe .img-fluid, così che vengano applicate all’immagine le proporietà max-width: 100%; e height: auto; in modo che sia ridimensionata attraverso l’elemento padre.

Puoi anche usare .img-thumbnail per aggiungere a un’immagine una cornice e un bordo arrotondato.

<img src="https://via.placeholder.com/120x120/ebebeb/808080/?text=Immagine" class="img-fluid img-thumbnail" alt="Immagine responsive generica">

Allineamento

Puoi allineare le immagini con le classi sull’allineamento dei testi .float-left e .float-right.
Le immagini a livello block possono essere centrate usando la classe di utilità margin .mx-auto per i margini automatici.

<img src="https://via.placeholder.com/120x120/ebebeb/808080/?text=Immagine" class="rounded float-left">
<img src="https://via.placeholder.com/120x120/ebebeb/808080/?text=Immagine" class="rounded float-right">

<img src="https://via.placeholder.com/120x120/ebebeb/808080/?text=Immagine" class="rounded mx-auto d-block">

Figure

Ogni qual volta sia necessario visualizzare un contenuto, ad esempio un’immagine, associandola ad una didascalia, è bene considerare l’utilizzo di <figure>.

Puoi usare le classi .figure, .figure-img e .figure-caption per fornire alcuni stili di base per gli elementi HTML5 <figure> e <figcaption>. Le immagini in figure non hanno determinate dimensioni, assicurati quindi di aggiungere la classe .img-fluid al tuo elemento <img> per renderlo responsive.

<figure class="figure">
    <img src="https://via.placeholder.com/240x120/ebebeb/808080/?text=Immagine" class="figure-img img-fluid rounded"/>
    <figcaption class="figure-caption">Una didascalia per immagine.</figcaption>
</figure>