C
csnotcs
Iota
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Hola!
¿Tenes un sitio web? ¿Buscas un diseño responsive? ¿cansado de usar porcentajes en css? ¿te gustaría tener el 100% de seguridad que la imagen se verá correctamente?
¡No busques mas!
En este tutorial te enseñaré otra manera de hacer responsive tus imágenes con el atributo "picture" que HTML5 trae.
¿Que necesitamos?
*Tener nuestras imagenes en diferentes medidas.
*Saber HTML básico.
Mas nada :encouragement:
Bueno, no voy a extender este tutorial mucho, ya que es algo muy simple.
Lo que debemos hacer es lo siguiente:
En nuestro documento html, a la hora de colocar una imagen, debemos poner el siguiente codigo:
donde los nombres deben ser reemplazados por sus imagenes.
¿Que hace esto?
Lo que hace es simple, "mira" que medida está especificada en tu imagen y muestra la que esté indicada como la correspondiente a la resolución desde donde se ve la imagen.
Por ej.
En ese codigo "imagenpequeña.png" se mostrará cuando la resolución del dispositivo sea de 480 pixeles de ancho (o menos). "imagenmedia.png" se mostrará cuando la resolución sea de 768 pixeles de ancho (Y MAS DE 480, porque si no, se mostrará la anterior). Y así sucesivamente. En el caso de "imagensuper.png 1024w 2x" el X2 significa que se mostrará en pantallas de 1024 pixeles de ancho, pero con el doble de densidad de pixeles (tipo retina).
Y bueno, mas o menos así se logra que las imagenes se adapten, sin necesidad de andar usando porcentajes y cosas complicadas. En uno está el ir jugando para que en pantallas mas pequeñas (obviamente de moviles) se cargen imagenes mas livianas, ir colocando por defecto lo mas liviano para mejorar la carga y todo ese rollo.
Este tutorial lo hice lo más básico posible para que sea rápido y fácil de entender, aunque no tiene mucha ciencia xD
Y mas nada, ojala les sirva si están haciendo algo en html, o simplemente para aprender algo nuevo y adentrarse en las nuevas tecnologias que HTML5 trajo debajo del brazo :encouragement:
Hasta la proximaaaaaaaaaaaaaaaaaa :topsy_turvy:
¿Tenes un sitio web? ¿Buscas un diseño responsive? ¿cansado de usar porcentajes en css? ¿te gustaría tener el 100% de seguridad que la imagen se verá correctamente?
¡No busques mas!
En este tutorial te enseñaré otra manera de hacer responsive tus imágenes con el atributo "picture" que HTML5 trae.
¿Que necesitamos?
*Tener nuestras imagenes en diferentes medidas.
*Saber HTML básico.
Mas nada :encouragement:
Bueno, no voy a extender este tutorial mucho, ya que es algo muy simple.
Lo que debemos hacer es lo siguiente:
En nuestro documento html, a la hora de colocar una imagen, debemos poner el siguiente codigo:
Insertar CODE, HTML o PHP:
<picture>
<img
src="imagengrande.png"
sizes="(max-width: 1024px) 100vw, 1024px"
srcset="imagenpequeña.png 480w, imagenmedia.png 768w, imagengrande.png 1024w, imagensuper.png 1024w 2x">
</picture>donde los nombres deben ser reemplazados por sus imagenes.
¿Que hace esto?
Lo que hace es simple, "mira" que medida está especificada en tu imagen y muestra la que esté indicada como la correspondiente a la resolución desde donde se ve la imagen.
Por ej.
En ese codigo "imagenpequeña.png" se mostrará cuando la resolución del dispositivo sea de 480 pixeles de ancho (o menos). "imagenmedia.png" se mostrará cuando la resolución sea de 768 pixeles de ancho (Y MAS DE 480, porque si no, se mostrará la anterior). Y así sucesivamente. En el caso de "imagensuper.png 1024w 2x" el X2 significa que se mostrará en pantallas de 1024 pixeles de ancho, pero con el doble de densidad de pixeles (tipo retina).
Y bueno, mas o menos así se logra que las imagenes se adapten, sin necesidad de andar usando porcentajes y cosas complicadas. En uno está el ir jugando para que en pantallas mas pequeñas (obviamente de moviles) se cargen imagenes mas livianas, ir colocando por defecto lo mas liviano para mejorar la carga y todo ese rollo.
Este tutorial lo hice lo más básico posible para que sea rápido y fácil de entender, aunque no tiene mucha ciencia xD
Y mas nada, ojala les sirva si están haciendo algo en html, o simplemente para aprender algo nuevo y adentrarse en las nuevas tecnologias que HTML5 trajo debajo del brazo :encouragement:
Hasta la proximaaaaaaaaaaaaaaaaaa :topsy_turvy: