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
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Usare una container image come runner di GitHub Actions
Reactive form tipizzati con modellazione del FormBuilder in Angular
Taggare la output cache in base al routing in ASP.NET Core
Installare le Web App site extension tramite una pipeline di Azure DevOps
Filtrare e rimuovere gli elementi dalla cache del browser tramite le API JavaScript
Elencare le container images installate in un cluster di Kubernetes
Generare token per autenicarsi sulle API di GitHub
Accesso sicuro ai secrets attraverso i file in Azure Container Apps
Eseguire una query su SQL Azure tramite un workflow di GitHub
Usare un KeyedService di default in ASP.NET Core 8
Limitare le richieste lato server con l'interactive routing di Blazor 8
Load test di ASP.NET Core con k6