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 diferentes tamaños para ver cómo este carga diferentes imágenes y usa diferentes diseños en distintos tamaños de navegador.
Consulta el código
- Consulta
index.html
para obtener 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
determina que el ancho de visualización de la imagen será "100% del ancho del viewport" en viewports de hasta 480 px de ancho, "50% del ancho de viewport" en pantallas de 481 a 1,024 px y 800 px en pantallas de ancho superior a 1,024 px. Estos coinciden con los que se especificaron en el CSS.
La capacidad de especificar varios anchos de ranuras 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 ranuras
- Usa una lista separada por comas para especificar varios anchos de ranuras. Cada elemento de la lista, excepto el último, consta de una condición multimedia (p.ej.,
max-width
omin-width
) y un ancho de ranura. - El último elemento de esta lista es el ancho de ranura predeterminado. Es la predeterminada, por lo que no necesitas especificar una condición de contenido multimedia.
- Puedes enumerar tantos anchos de ranuras como desees. La cantidad de imágenes enumeradas en
srcset
no importa. El ancho de ranuras se puede especificar mediante una variedad de unidades. A continuación, se muestran todos los anchos válidos:
100px
33vw
20em
calc(50vw-10px)
El siguiente no es un ancho válido:
25%
(los porcentajes no se pueden utilizar con el atributo de tamaños)