Teoría
Teoría

Imágenes que se ajustan al contenedor

Aumentamos el tamaño de una imagen y la distribución se rompió.

Las tarjetas tienen un ancho fijo. Si usamos una imagen más grande, sobresale del contenedor. Para evitarlo, podemos agregar estos estilos a las imágenes:

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

La propiedad max-width define el ancho máximo. El valor 100% indica que el elemento no debe superar el ancho de su padre.

La propiedad height define la altura. Con auto, la imagen conserva sus proporciones. Si no lo indicamos, se usará el atributo height del HTML y es probable que la imagen se deforme.

Esto funciona porque las propiedades CSS max-width y height tienen prioridad sobre los atributos width y height del HTML.

Agregaremos un ancho máximo del 100% y una altura automática. Después aumentaremos el tamaño de las otras imágenes y comprobaremos que no sobresalgan ni se deformen.

En algunas versiones antiguas de Safari, las imágenes podían deformarse un poco incluso con ancho máximo y altura automática. En esos casos, podía ayudar envolver la imagen en una etiqueta adecuada, como <figure> o <div>.

Ya hemos probado varias veces la distribución cambiando el contenido. En un proyecto real, también hay que probarla en distintos navegadores.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="carousel-decorative.css"> <link rel="stylesheet" href="style.css"> <title>Crea tu smoothie</title> </head> <body> <section class="carousel"> <h2>Crea tu smoothie</h2> <button class="arrow arrow-back" type="button"><span class="visually-hidden">Anterior</span></button> <ul class="cards-list"> <li class="card"> <h3 class="title">Mandarina</h3> <img class="image" src="img/mandarin.jpg" alt="Mandarina" width="120" height="120"> <p class="description">Sabor dulce e intenso con un toque ácido.</p> <a class="add-link" href="#">+ Agregar</a> </li> <li class="card current"> <h3 class="title">Lima</h3> <img class="image" src="img/lime.jpg" alt="Lima" width="240" height="240"> <p class="description">Un toque ácido y un aroma único.</p> <a class="add-link" href="#">+ Agregar</a> </li> <li class="card"> <h3 class="title">Fresa</h3> <img class="image" src="img/strawberry.jpg" alt="Fresa" width="120" height="120"> <p class="description">Suave aroma floral y sabor a verano.</p> <a class="add-link" href="#">+ Agregar</a> </li> </ul> <button class="arrow arrow-forward" type="button"><span class="visually-hidden">Siguiente</span></button> </section> </body> </html>

CSS

.cards-list { display: flex; align-items: center; margin: 0; padding: 0; } .card { display: flex; flex-direction: column; width: 120px; margin-right: 10px; padding: 15px; } .card:nth-child(3) { margin-right: 0; } .current { width: 150px; } .image { order: -1; margin-bottom: 15px; } .title { align-self: center; margin-top: 0; margin-bottom: 10px; } .description { margin-top: 0; margin-bottom: 5px; } .add-link { margin-top: 10px; padding: 5px; }

ObjetivosRealizado

Agrega max-width con el valor 100% a la clase image. La imagen dejará de sobresalir, pero quedará demasiado alta.
En la misma regla, agrega height con el valor auto. La imagen dejará de deformarse.
En index.html, cambia a 240 el ancho y la altura de las imágenes de las otras dos tarjetas. Comprueba que la distribución no se rompa.

En la vista previa, usa los botones con flechas para recorrer el carrusel.

Recorre el carrusel.