Dimensionare le immagini e il layout con la proprietà CSS aspect-ratio

di Morgan Pizzini, in HTML5, CSS,

Il caricamento delle immagini è in certi versi un elemento cruciale per la creazione di siti web con un layout accattivante che riesca ad intrattenere l'utente il più possibile. Abbiamo già parlato dell'attributo aspect-ratio nello script #314 associandolo alle dimensioni di un elemento div. Prima di vederlo all'opera sulle immagini, capiamo il perché ne abbiamo bisogno.

Le immagini inserite in un'applicazione web non hanno la stessa dimensione o lo stesso rapporto larghezza/altezza, una prima soluzione a tale problema è l'utilizzo della proprietà CSS object-fit. A seconda del valore assegnato potremmo avere vari effetti grafici:

  • fill: adatta l'immagine al contenitore, andando però a alterare le dimensioni effettive, il che porterà ad avere un'immagine alterata.
  • none: posiziona l'immagine centralmente e taglia l'eccedenza.
  • contain: garantisce che l'immagine sia completamente visualizzata, adeguando il lato più esteso al contenitore.
  • cover: al contrario di contain, utilizza il lato più corto e taglia il contenuto dell'immagine che esce dal contenitore.

Benchè il cover risulti la metodologia più conservativa per l'inserimento di un'immagine, in quanto è l'unica che occupa tutto lo spazio disponibile non alterando il rapporto dell'immagine, tutti gli attributi precedentemente elencati vanno ad alterare l'immagine tagliandola o modificandola.

Padding-Top Hack


Prima dell'avvento di aspect-ratio si utilizzava la proprietà padding-top che andava a riservare un'area in relazione alla larghezza del contenitore, creando il giusto spazio in cui inserire l'immagine. Il che però comporta l'utilizzo di regole CSS ferree per avere il giusto layout. Facendo un esempio: con un'immagine in 4:3 il padding-top dovrebbe essere del 75% (3/4), nel caso fosse 16:9 avremmo un valore di 56.25% (9/16). Oltretutto occorre inserire l'immagine in termini assoluti all'interno del contenitore. Per rispettare questa struttura il codice minimo da scrivere risulta il seguente.

<style>
.container {
  position: relative;
  width: 100%;
  padding-top: 75%;
}

.media {
  position: absolute;
  top: 0;
}
</style>
<div class="container">
  <img class="img">
</div>

aspect-ratio


Riscriviamo lo snippet precedente utilizzando aspect-ratio:

<style>
.container {
  width: 100%;
  aspect-ratio: 4/3;
}
</style>
<div class="container">
  <img class="img">
</div>

Il codice risulta molto più chiaro e pulito, non dovendoci più occupare di calcolare il giusto rapporto o posizionare l'immagine all'interno del contenitore. La stessa proprietà può essere applicata anche all'immagine stessa, in unione con object-fit

<style>
.container img{
  aspect-ratio: 4 / 3;
  width: 100%;
  object-fit: contain;
}
</style>
<div class="container">
  <img class="img">
</div>

In questo caso object-fit: contain garantisce che tutta l'immagine sia visualizzata all'interno del box e con aspect-ratio ne stabiliamo il formato.

Cumulative Layout Shift


L'utilizzo di aspect-ratio aiuta anche a prevenire l'effetto definito Cumulative Layout Shift, il quale avviene a seguito dell'inserimento di un contenuto successivo al primo caricamento della pagina, che genera quindi lo spostamento degli elementi pre-esistenti. Con aspect-ratio il contenitore durante il primo rendering andrà a occupare lo spazio necessario al cui interno inserirà l'immagine o il media ricevuto.

Commenti

Visualizza/aggiungi commenti

| Condividi su: Twitter, Facebook, LinkedIn

Per inserire un commento, devi avere un account.

Fai il login e torna a questa pagina, oppure registrati alla nostra community.

Approfondimenti

I più letti di oggi