Imágenes flexibles

Parte de la sección Estilos con CSS del Journey de HTML de Coddy. Lección 66 de 76.

En el diseño web adaptable, las imágenes flexibles se ajustan automáticamente para adaptarse a diferentes tamaños de pantalla, lo que garantiza que se vean bien en todos los dispositivos. Sin flexibilidad, las imágenes pueden ser demasiado grandes en pantallas pequeñas o romper el diseño.

Cómo hacer que las imágenes sean flexibles:

1.Usa CSS max-width
Establecer max-width: 100% garantiza que las imágenes nunca superen el ancho de su contenedor.

img {
  max-width: 100%;
  height: auto; /* Mantiene la relación de aspecto */
}

2.Usa unidades del viewport
Puedes dimensionar las imágenes usando vw (ancho del viewport) para hacer que se adapten al tamaño de la pantalla.

img {
  width: 50vw; /* La imagen ocupa el 50% del ancho de la ventana gráfica */
}

Desafío

Fácil

Se te proporciona un documento HTML con una imagen. Tu tarea es hacer que la imagen sea responsiva para que se ajuste a diferentes tamaños de pantalla.

Escribe una regla CSS que apunte a todos los elementos con la clase img-max. Establece su max-width a 100% y su height a auto.
Escribe una regla CSS que apunte a todos los elementos con la clase img-vw. Establece su width a 50vw y su height a auto.

Pruébalo tú mismo

<html>
<head>
    <title>Flexible Images</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body style="background-color:lightblue">
     <div class="container">
        <h2>Image with max-width: 100%</h2>
        <img class="img-max" src="https://upload.wikimedia.org/wikipedia/commons/0/0e/Adelie_penguins_in_the_South_Shetland_Islands.jpg" alt="Max-Width Image">
    </div>

    <div class="container">
        <h2>Image with width: 50vw</h2>
        <img class="img-vw" src="https://upload.wikimedia.org/wikipedia/commons/4/40/Adelie_Penguins_on_iceberg.jpg">
    </div>
</body>
</html>