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 distinto tamaño para ver que el navegador carga distintas imágenes y usa diferentes diseños en función de los tamaños.

Consulta el código

• Consulta index.html para 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 establece 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 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 el último, consiste en una condición de contenido multimedia (p. ej., max-width o min-width) y un ancho de espacio.
• El último elemento de esta lista es el ancho predeterminado de la ranura. 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:

• 100px

• 33vw

• 20em

• calc(50vw-10px)

El siguiente no es un ancho válido:

• 25% (no se pueden usar porcentajes con el atributo sizes)