Immagini

Documentazione ed esempi per l’inserimento di immagini responsive, che quindi non diventano mai più grandi dei loro elementi genitore.

Le immagini in Bootstrap Italia 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.

<img src="..." alt="..." class="img-fluid" />

Thumbnails

Oltre alle utilità sull’arrotondamento dei bordi, puoi usare .img-thumbnail per aggiungere a un’immagine una cornice e un bordo arrotondato.

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

Allineamento

Puoi allineare le immagini con le classi di supporto sul float o con le classi sull’allineamento dei testi. Le immagini a livello block possono essere centrate usando la classe di utilità margin .mx-auto.

<img src="..." alt="..." class="rounded float-left" /> <img src="..." alt="..." class="rounded float-right" />

<img src="..." alt="..." class="rounded mx-auto d-block" />

<div class="text-center">
  <img src="..." class="rounded" alt="..." />
</div>

Picture

Se stai usando l’elemento <picture> per specificare multipli elementi <source> per una specifica <img>, assicurati di aggiungere la classe .img-* al tag <img> e non al tag <picture>.

​<picture>
  <source srcset="..." type="image/svg+xml" />
  <img src="..." alt="..." class="img-fluid img-thumbnail" />
</picture>

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://placehold.co/240x120/ebebeb/808080/?text=Immagine" class="figure-img img-fluid rounded" alt="Un'immagine generica segnaposto con angoli arrotondati in una figura.">
  <figcaption class="figure-caption">Una didascalia per l'immagine sopra.</figcaption>
</figure>

Puoi allineare la didascalia di una figura è semplice con le nostre utilità di testo.

<figure class="figure">
  <img src="https://placehold.co/240x120/ebebeb/808080/?text=Immagine" class="figure-img img-fluid rounded" alt="Un'immagine generica segnaposto con angoli arrotondati in una figura.">
  <figcaption class="figure-caption text-right">Una didascalia per l'immagine sopra.</figcaption>
</figure>