Prueba esta demostración
Para obtener una vista previa del sitio, presiona View App y, luego, Fullscreen
.Vuelve a cargar la app en ventanas del navegador de diferentes tamaños para ver cómo el navegador carga imágenes distintas y usa diseños diferentes según el tamaño de la ventana.
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 siguiente:
"100% del ancho del viewport" en viewports de hasta 480 px de ancho, "50% del ancho del viewport"
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 espacio 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 espacio publicitario
- Usa una lista separada por comas para especificar varios anchos de espacio. Cada elemento de la lista, excepto el último, consta de una condición de medios (p.ej.,
max-widthomin-width) y un ancho de espacio publicitario. - El último elemento de esta lista es el ancho predeterminado del espacio. Es el valor predeterminado, por lo que no es necesario que especifiques una condición de medios.
- Puedes indicar tantos anchos de espacio como quieras; la cantidad de imágenes que se indican en
srcsetno importa. El ancho del espacio se puede especificar con una variedad de 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 de tamaños)