Le immagini
reattive
vengono spesso implementate con l'attributo
srcset
. L'attributo srcset
è un elenco separato da virgole di nomi file delle immagini
e dei relativi descrittori di
larghezza o
densità.
Per evitare variazioni del layout, imposta gli attributi width
e height
sui tag <img>
e
<source>
che utilizzano srcset
.
Descrittori di densità
Per creare immagini adattabili che utilizzano descrittori di densità:
- Tutte le immagini elencate in
src
esrcset
devono avere le stesse proporzioni. - Imposta gli attributi
width
eheight
in modo che corrispondano alle dimensioni dell'immagine1x
. - L'attributo
src
deve fare riferimento all'immagine1x
.
Descrittori di larghezza
Per creare immagini adattabili che utilizzano descrittori di larghezza:
- Tutte le immagini elencate in
src
esrcset
devono avere le stesse proporzioni. - Gli attributi
width
eheight
devono corrispondere alle dimensioni dell'immagine di riserva. - Regola lo stile dell'immagine in base alle tue esigenze. Senza CSS, se imposti
width
eheight
su un'immagine adattabile con descrittori di larghezza, l'immagine verrà sempre visualizzata alle dimensioni impostate. anche quando le immagini elencate insrcset
hanno dimensioni diverse. Questo comportamento potrebbe non essere ciò che vuoi. Aggiungiwidth: 100%; height: auto;
owidth: 100vw; height: auto;
allo stile dell'immagine per ottenere l'aspetto visivo che desideri.
Elementi dell'immagine
Per creare elementi <picture>
adattabili:
- Imposta gli attributi
width
eheight
per tutti i tag<source>
. I valori appropriati per questi attributi dipendono dal modo in cui il tag<source>
utilizzasrcset
. - Modifica l'immagine applicando uno stile al tag
<img>
corrispondente. Il tag<source>
è un elemento vuoto e, pertanto, lo stile non ha alcun effetto. - Imposta gli attributi
width
eheight
nel tag<img>
. Questi valori devono corrispondere alle dimensioni intrinseche dell'immagine di riserva.
Esempi
HTML
<!-- Using density descriptors -->
<img width="480" height="330"
srcset="cat-1x.jpg, cat-2x.jpg 2x, cat-3x.jpg 3x"
src="cat-1x.jpg"
alt="Photo of a cat on a green background">
<!-- Using width descriptors -->
<img width="256" height="128"
srcset="dog-256w.jpg 256w, dog-512w.jpg 512w, dog-1028w.jpg 1028w"
src="dog-256w.jpg"
alt="Photo of a dog on a orange background">
<!-- Picture tag -->
<picture>
<source media="(max-width: 720px)" width="600" height="300" srcset="newyork-rectangle.jpg" />
<source media="(min-width: 721px)" width="600" height="600" srcset="newyork-square-1x.jpg, newyork-square-2x.jpg 2x, newyork-square-3x.jpg 3x" />
<img src="newyork-rectangle.jpg" width="600" height="300" alt="Photo of the Empire State Building">
</picture>