Acabo de comenzar una nueva página web, por lo que no hay mucho marcado para repasar.
Dejo esto abajo:
<picture>
<source media="(min-width: 1000px)"
srcset="images/largeme.jpg">
<source media="(min-width: 465px)"
srcset="images/medme.jpg">
<img src="images/smallme.jpg"alt="hero profile">
</picture>
y el valor predeterminado es la imagen medme.jpg sin importar el ancho de la ventana. Dejo esto:
<picture>
<source media="(min-width: 1000px)"
srcset="images/largeme.jpg">
<source media="(min-width: 465px)"
srcset="images/medme.jpg">
<!-- <img src="images/smallme.jpg"alt="hero profile">-->
</picture>
comentando la etiqueta de respaldo img y no muestra nada.
Estoy ejecutando Chrome 52, que debería ser compatible con el elemento de imagen. Pero parece estar actuando como si no lo apoyara o algo así. ¿Qué estoy haciendo mal aquí?
Solución del problema
Suena tonto, pero ¿has probado a revertir el orden? Por alguna razón, hacer esto hizo que funcionara para mí.
Entonces, en lugar de:
<picture>
<source media="(min-width: 1000px)"
srcset="images/largeme.jpg">
<source media="(min-width: 465px)"
srcset="images/medme.jpg">
<img src="images/smallme.jpg"alt="hero profile">
</picture>
prueba esto:
<picture>
<source media="(min-width: 465px)"
srcset="images/medme.jpg">
<source media="(min-width: 1000px)"
srcset="images/largeme.jpg">
<img src="images/smallme.jpg"alt="hero profile">
</picture>
No hay comentarios.:
Publicar un comentario