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 AUSL-BO 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.

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

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

Un'immagine generica segnaposto con angoli arrotondati

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

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

<figure class="figure">
  <img src="https://via.placeholder.com/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://via.placeholder.com/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>