Descripción
El atributo sizes en HTML se utiliza junto con el elemento source para especificar el tamaño de la imagen en diferentes condiciones de visualización. Este atributo ayuda en la especificación de las dimensiones de la imagen para optimizar su visualización en diferentes dispositivos y resoluciones.
Solo se puede utilizar si el elemento padre es picture. No aplica para audio o video.
El atributo sizes se utiliza con una lista de condiciones de medios y anchos de imágenes asociados. Cada condición de medios se evalúa de izquierda a derecha hasta que se encuentra una que sea verdadera, entonces se utiliza el ancho de imagen asociado para decidir qué imagen de la lista srcset se debe utilizar. Si ninguna condición de medios es verdadera, se utiliza el valor de ancho de imagen final en la lista.
Sintaxis
<source sizes="source-size-list">
- source-size-list, una cadena que especifica una lista de condiciones de medios y anchos de imagen. Cada entrada se compone de una condición de medios y un ancho de imagen asociado, separados por un espacio. Las entradas se separan con comas.
Elemento Padre
Ejemplo
<picture>
<source srcset="imagen.jpg" sizes="(min-width: 600px) 200px, 50vw">
<source srcset="imagen2.jpg">
<img src="imagen_original.jpg" alt="Flowers" style="width:auto;">
</picture>
Este ejemplo muestra cómo utilizar el atributo sizes en conjunto con el elemento source para optimizar la visualización de imágenes en diferentes condiciones de visualización.
Artículos
Vídeos HTML
Disfruta también de nuestros artículos sobre HTML en formato vídeo. Aprovecha y suscribete a nuestro canal.