El problema: imagen con ancho fijo que desborda

Una imagen con width="600" en el HTML ocupa 600px sin importar el ancho del contenedor. En un teléfono con 375px de pantalla, la imagen desborda 225px hacia la derecha — aparece el scroll horizontal que hace inutilizable el sitio.

<!-- Este img siempre ocupa 600px — desborda en pantallas angostas -->
<img src="foto.jpg" width="600" height="400" alt="Descripción">

---

La solución: max-width: 100% + height: auto

img {
  max-width: 100%;
  height: auto;
}

Qué hace cada parte:

• max-width: 100% — la imagen nunca será más ancha que su contenedor. Si el contenedor tiene 375px, la imagen se achica a 375px. Si el contenedor tiene 1200px y la imagen mide 600px, se queda en 600px (no se estira más allá de su tamaño natural).
• height: auto — la altura se ajusta proporcionalmente al ancho. Sin esto, al achicar el ancho la imagen se deformaría (más angosta pero con la altura original).

Este par va siempre junto: max-width: 100% sola achicha el ancho pero puede distorsionar la imagen. Con height: auto, las proporciones se mantienen.

/* Regla canónica para imágenes responsive */
.foto {
  max-width: 100%;
  height: auto;
  display: block; /* evita el espacio inline por defecto debajo de la imagen */
}

Sobre el motor de checks: getComputedStyle(.foto).maxWidth devuelve exactamente "100%" (el porcentaje especificado, no un valor en px). Por eso este check es estable y honesto. El efecto visual de que la imagen no desborde no se puede validar automáticamente — lo observás arrastrando el borde del preview.

---

srcset: el navegador elige la imagen correcta

Sin srcset, un dispositivo con pantalla Retina (densidad de píxeles 2x) descarga la imagen estándar y la renderiza en el doble de tamaño lógico — se ve borrosa.

El atributo srcset le da al navegador opciones:

<img
  src="foto.jpg"
  srcset="foto.jpg 1x, foto-2x.jpg 2x"
  alt="Descripción"
  width="600"
  height="400">

• 1x — para pantallas estándar (la mayoría de escritorios).
• 2x — para pantallas Retina o HiDPI (iPhones, MacBook Pro, pantallas 4K).

El navegador lee srcset, detecta la densidad de píxeles del dispositivo y descarga la versión apropiada. El src sigue siendo el fallback — todos los navegadores modernos soportan srcset, pero src se mantiene por compatibilidad y como fallback explícito.

Las imágenes de este ejercicio (foto1.jpg, foto2.jpg, foto3.jpg) no existen en el sandbox — verás el fondo gris de .foto. Eso es intencional: el ejercicio enseña la propiedad CSS y el atributo, no la imagen concreta.

---

Tu turno:

1. En el CSS, agregá max-width: 100% a .foto.
2. En el HTML, agregá srcset a cada imagen con los valores del enunciado.

Comprobá con “Comprobar” y después arrastrá el borde del preview para ver las imágenes adaptarse.