Avatar

Nada me funciono de esta clase, cuando intente abrir el archivo nada, la imagen no cambia al cambiar el tamaño del viewport

<html lang="es" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Imagenes</title>
  </head>
  <body>
    <img
         src="img/img.jpg"
         srcset="img/img2.jpg 1.5x,
                 img/img3.jpg 2x"
    >
  </body>
</html>
    >```
Luego con la etiqueta source tampoco funciono nada :3

 ```<!DOCTYPE html>
<html lang="es" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Imagenes</title>
  </head>
  <body>
    <!-- <img
         src="img/img.jpg"
         srcset="img/img2.jpg 1.5x,
                 img/img3.jpg 2x"
    > -->
    <picture>
      <source srcset="img/img.jpg" media=(min-width: 500px)>
      <source srcset="img/img2.jpg" media=(min-width: 800px)>
      <img src="img3" alt="imagen">
      </picture>
  </body>
</html>
3respuestas
Avatar

Sencillo, a la hora del spurce dentro del media debes encerrar entre comillas el min-width

ejemplo:

<picture>
<source srcset="mdn-logo-wide.png" media="(min-width: 600px)">
<img src="mdn-logo-narrow.png" alt="MDN">
</picture>

Cualquier cosa revisa este enlace: Picture MDN

Avatar

Nunca va a cambiar, HTML no es Responsive Web Design. Solo detecta a la primera carga y guarda en caché, En clase tenia que explicar eso con Firefox o limpiar caché en cada recarga con Chrome. Chrome hace eso para no tener que cargar una imagen diferente en cada caso.

Avatar

Cierto profesor, cierto detalle que se me olvido y pase por alto

Necesitas iniciar sesión para responder.
¿En qué estamos trabajando?
Algoritmos

Algoritmos

Aprende como funcionan los algoritmos en las ciencias de la computación y diseña soluciones para cada tipo de problema.