Nei precedenti script, ci siamo trovati spesso a parlare delle immagini e di come siano belle, ma a volte complesse da integrare nel nostro layout a causa delle dimensioni, del punto di taglio o addirittura del peso delle stesse.
Oggi andremo proprio a risolvere questo ultimo punto, utilizzando un parametro fornito dal tag , il quale ci consentirà di caricare la giusta immagine alla giusta risoluzione. Poiché un sito internet può essere fruito sia da mobile che da fisso con differenti risoluzioni, e non è raro osservare che le risoluzioni mobile - retina display - riescano a visualizzare un'immagine molto più grande rispetto ai normali monitor.
Sarà, dunque, nostro compito riuscire a fornire la giusta immagine alla giusta risoluzione e, per fare questo, utilizzeremo l'attributo srcset del tag img.
<img src="default.jpg" srcset="default.jpg 500w, defaultX2.jpg 1000w, defaultX3.jpg 1500w">
In questo modo, sarà il browser stesso a occuparsi dell'immagine più adeguata da scaricare, basandosi sulla grandezza della viewport corrente.
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Supportare route multiple nella generazione di URL in Blazor
Le novità di Entity Framework Core 6
Come sono state modificate le checkbox nelle form di Bootstrap 5
Dichiarare una struct come record in C#
Semplificare con un extension method l'aggiunta di filtri a run time nelle query LINQ
Un confronto tra Framework CSS: Foundation, Bulma, TailwindCSS e SemanticUI
Serializzare un enum come stringa con System.Text.Json
Effettuare un loop di una GitHub Action
Introduzione al nuovo tipo DateOnly di .NET
Migliorare l'accessibilità tramite l'attributo aria-live
Dependency injection con Minimal API di ASP.NET Core
Avviare e arrestare programmaticamente un Hosted Service di ASP.NET Core