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 el navegador carga diferentes imágenes y usa diferentes diseños en diferentes tamaños de navegador.
Consulta el código
- Consulta
index.htmlpara 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 indica 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 anchos 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 ranura. Cada elemento de la lista, excepto el último, consiste en una condición de contenido multimedia (p.ej.,
max-widthomin-width) y un ancho de espacio. - El último elemento de esta lista es el ancho de la ranura predeterminado. 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:
100px33vw20emcalc(50vw-10px)
El siguiente no es un ancho válido:
25%(no se pueden usar porcentajes con el atributo sizes)