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.

Hoja de referencia

Las imágenes flexibles se ajustan automáticamente para adaptarse a diferentes tamaños de pantalla en el diseño web responsivo.

Uso de max-width:

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

Uso de unidades de viewport:

img {
  width: 50vw; /* La imagen ocupa el 50% del ancho del viewport */
}

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>