Vai al contenuto principale

Bootstrap Italia

Il tema Bootstrap 5 per lo sviluppo di applicazioni web per la PA
Cerca nella documentazione

Immagini

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 proprietà max-width: 100%; e height: auto; in modo che sia ridimensionata attraverso l’elemento padre.

Immagine responsive generica 

1

  <img src="https://placehold.co/120x120/ebebeb/808080/?text=Immagine" class="img-fluid" alt="Immagine responsive generica">

Thumbnails

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

Una generica immagine segnaposto quadrata con un bordo bianco attorno ad essa, che la rende simile a una foto scattata con una vecchia macchina fotografica istantanea 

1

  <img src="https://placehold.co/120x120/ebebeb/808080/?text=Immagine" class="img-thumbnail" alt="Una generica immagine segnaposto quadrata con un bordo bianco attorno ad essa, che la rende simile a una foto scattata con una vecchia macchina fotografica istantanea">

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.

Un'immagine generica segnaposto con angoli arrotondati Un'immagine generica segnaposto con angoli arrotondati 

1
2

  <img src="https://placehold.co/120x120/ebebeb/808080/?text=Immagine" class="rounded float-start" alt="Un'immagine generica segnaposto con angoli arrotondati">
  <img src="https://placehold.co/120x120/ebebeb/808080/?text=Immagine" class="rounded float-end" alt="Un'immagine generica segnaposto con angoli arrotondati">
Un'immagine generica segnaposto con angoli arrotondati 

1

  <img src="https://placehold.co/120x120/ebebeb/808080/?text=Immagine" class="rounded mx-auto d-block" alt="Un'immagine generica segnaposto con angoli arrotondati">
Un'immagine generica segnaposto con angoli arrotondati 

1
2
3

  <div class="text-center">
    <img src="https://placehold.co/120x120/ebebeb/808080/?text=Immagine" class="rounded" alt="Un'immagine generica segnaposto con angoli arrotondati">
  </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>.

1
2
3
4

​<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 dimensioni determinate, assicurati quindi di aggiungere la classe .img-fluid al tuo elemento <img> per renderlo responsive.

Un'immagine generica segnaposto con angoli arrotondati in una figura.
Una didascalia per l'immagine sopra.

1
2
3
4

<figure class="figure">
  <img src="https://placehold.co/280x120/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>

Allineare la didascalia di una figura è semplice con le utilità di testo.

Un'immagine generica segnaposto con angoli arrotondati in una figura.
Una didascalia per l'immagine sopra.

1
2
3
4

<figure class="figure">
  <img src="https://placehold.co/280x120/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-end">Una didascalia per l'immagine sopra.</figcaption>
</figure>