Prueba esta demostración
Para obtener una vista previa del sitio, presiona Ver app. Luego, presiona Pantalla completa.
Vuelve a cargar la app en ventanas del navegador de distinto tamaño para ver que el navegador carga distintas imágenes y usa diferentes diseños en función de los tamaños.
Consulta el código
- Consulta
index.html
para ver el código que hace que esto funcione:
<img src="flower.jpg"
srcset="flower-small.jpg 480w, flower-large.jpg 800w"
sizes="(max-width: 480px) 100vw, (max-width: 1024px) 50vw, 800px">
¿Qué sucede aquí?
El valor del atributo sizes
establece que el ancho de visualización de la imagen será el "100% del ancho de la ventana de visualización" en ventanas de visualización de hasta 480 px de ancho, el "50% del ancho de la ventana de visualización" en pantallas de 481 a 1,024 px de ancho y 800 px en pantallas de más de 1,024 px de ancho. Estos anchos coinciden con los especificados en el CSS.
La capacidad de especificar varios anchos de ranura se adapta a los diseños de página que usan diferentes estilos (es decir, anchos de imagen) para diferentes tamaños de viewport.
Cómo especificar varios anchos de ranura
- Usa una lista separada por comas para especificar varios anchos de ranuras. Cada elemento de la lista, excepto el último, consiste en una condición de contenido multimedia (p. ej.,
max-width
omin-width
) y un ancho de espacio. - El último elemento de esta lista es el ancho predeterminado de la ranura. Es la opción predeterminada, por lo que no es necesario especificar una condición de contenido multimedia.
- Puedes enumerar tantos anchos de espacio como desees. No importa la cantidad de imágenes que se enumeren en
srcset
. El ancho de la ranura se puede especificar con varias unidades. Los siguientes son todos los anchos válidos:
100px
33vw
20em
calc(50vw-10px)
El siguiente no es un ancho válido:
25%
(no se pueden usar porcentajes con el atributo sizes)