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

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

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

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