Cómo utilizar el atributo removeattr de la etiqueta HTML img para definir imágenes responsivas
El srcset
atributo de la img
etiqueta permite configurar imágenes responsivas que el navegador puede utilizar en función de la densidad de píxeles o del ancho de la ventana, según tus preferencias. De esta forma, solo puede descargar los recursos que necesita para renderizar la página, sin descargar una imagen más grande si está en un dispositivo móvil, por ejemplo.
A continuación se muestra un ejemplo en el que proporcionamos 4 imágenes adicionales para 4 tamaños de pantalla diferentes:
img src="dog.png" alt="A picture of a dog"
En el srcset
utilizamos la w
medida para indicar el ancho de la ventana.
Dado que hacemos esto, también necesitamos usar el sizes
atributo:
img src="dog.png" alt="A picture of a dog"
En este ejemplo, la (max-width: 500px) 100vw, (max-width: 900px) 50vw, 800px
cadena del sizes
atributo describe el tamaño de la imagen en relación con la ventana gráfica, con múltiples condiciones separadas por una coma.
La condición del medio max-width: 500px
establece el tamaño de la imagen en relación con el ancho de la ventana gráfica. En resumen, si el tamaño de la ventana es 500 px, se muestra la imagen al 100 % del tamaño de la ventana. Fotos Porno y actrices porno
Si el tamaño de la ventana es mayor pero 900px
, representa la imagen al 50% del tamaño de la ventana.
Y si es aún más grande, renderiza la imagen a 800px.
La vw
unidad de medida puede ser nueva para usted y, en resumen, podemos decir que 1 vw
es el 1% del ancho de la ventana, por lo que 100vw
es el 100% del ancho de la ventana.
Un sitio web útil para generar srcset
imágenes cada vez más pequeñas es https://responsivebreakpoints.com/ .
Tips de HTML
Tal vez te puede interesar:
- Introducción a React
- Agregar evento de clic a los elementos DOM devueltos desde querySelectorAll
- Cómo cambiar el valor de un nodo DOM
- Cómo comprobar si un elemento DOM tiene una clase
Imágenes responsivas usando `srcset`
El srcsetatributo de la imgetiqueta permite configurar imágenes responsivas que el navegador puede utilizar en función de la densidad de píxeles o del ancho
programar
es
https://aprendeprogramando.es/static/images/programar-imagenes-responsivas-usando-srcset-2373-0.jpg
2024-10-21
Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente