Utilizando imagen responsive y video

Cambiando la imágen según la resolución

Utlizamos 4 imágenes que se mostrarán y cambiarán según la resolución de pantalla del usuario, puedes probarlo haciendo más pequeña la estrecha del navegador. Para cambiar la imágen según el tamaño de resolución hemos puesto el siguiente código:

<picture>
<source media="(min-width:1100px)" srcset="images/0.jpg">
<source media="(min-width:800px)" srcset="images/1.jpg" width="100%">
<source media="(min-width:500px)" srcset="images/2.jpg" width="100%">
<source media="(min-width:400px)" srcset="images/3.jpg" width="100%">
<img src="images/0.jpg" width="100%">
</picture>

 

Puedes verlo en acción redimensionando esta pantalla

¿Te ha gustado este post?



Agradezco muchísimo tus comentarios