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 cómo se carga el navegador diferentes imágenes y usar distintos diseños en distintos tamaños de navegador.
Consulta el código
- Verifica
index.htmlpara 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á el siguiente:
"100% del ancho de la vista del puerto" en viewports de hasta 480 px de ancho, "el 50% de la vista
ancho" en pantallas de 481 a 1024 px de ancho y de 800 px en pantallas de más de 1024 px. Estos
los 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 por el último elemento, consta de una condición de contenido multimedia (p.ej.,
max-widthomin-width) y un ancho de ranura. - El último elemento de esta lista es el ancho predeterminado de la ranura. Es el valor predeterminado, no necesitas especificar una condición de contenido multimedia.
- Puede enumerar todos los anchos de ranura que desee: el número de imágenes indicadas en
srcsetno importa. El ancho de las ranuras se puede especificar con una variedad de unidades. Los siguientes son todos anchos válidos:
100px33vw20emcalc(50vw-10px)
El siguiente no es un ancho válido:
25%(no se pueden usar los porcentajes con el atributo de tamaños)