Imágenes Flexibles

Parte de la sección Styling with 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 max-width de CSS
Configurar max-width: 100% asegura que las imágenes nunca excedan el ancho de su contenedor.

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

2. Usa unidades de viewport
Puedes dimensionar las imágenes usando vw (viewport width) para que escalen con el 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>