Cómo especificar varios anchos de ranura

Katie Hempenius

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 o min-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)