Marc Semper Lloret
← CSS: diseño, maquetación y responsive

Sesión 13 · Semana 5

Imágenes y medios adaptables

Hoy · Hoja de ruta

  1. 1. Aprende: Por qué una imagen rompe un layout y cómo se encajan imágenes de tamaños distintos sin deformarlas.
  2. 2. Haz: Consigue un catálogo visualmente coherente con imágenes irregulares.
  3. 3. Comprueba: Ninguna imagen está estirada ni aplastada.

Antes de empezar · 5 minutos, sin apuntes

  1. ¿Qué significa trabajar mobile first?
  2. ¿Qué diferencia hay entre un layout fluido y una media query?
  3. Ordena el diagnóstico de un desbordamiento horizontal antes de escribir CSS nuevo.

La regla que va en toda hoja de estilos

Una imagen tiene un tamaño propio, y si es más ancha que su contenedor, se sale. Es la causa número uno de scroll horizontal.

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

max-width: 100% impide que sobrepase a su contenedor. height: auto es imprescindible junto a la anterior: sin ella, si el HTML declaraba width y height —como pedíamos en la UD1—, al reducirse el ancho la altura se quedaría fija y la imagen se deformaría.

object-fit

El problema real de un catálogo: las fotos de producto vienen con tamaños y proporciones distintas, y las tarjetas quedan desiguales.

La tentación es forzarlas:

/* Mal: deforma */
.card img { width: 100%; height: 15rem; }

Eso estira o aplasta la imagen. La solución es decirle cómo debe encajar en el hueco que le das:

.card img {
    width: 100%;
    height: 15rem;
    object-fit: cover;
}

object-fit

Cómo se acomoda el contenido de una imagen dentro de la caja que se le ha dado. cover la escala hasta llenarla y recorta lo que sobra, conservando la proporción. contain la encaja entera y deja huecos.

Valor Resultado
fill Por defecto: la estira hasta llenar. Deforma
cover Llena el hueco y recorta. La opción de un catálogo
contain Cabe entera, con huecos a los lados

Si el recorte de cover elimina la parte relevante, object-position determina qué zona se conserva:

.card img { object-fit: cover; object-position: top; }

aspect-ratio

Mejor que fijar una altura en rem es declarar una proporción:

.card img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

Ahora la altura se calcula sola a partir del ancho, así que la tarjeta funciona igual en una columna estrecha que en una ancha. Es la versión responsive de la idea anterior.

Tarea 13 · El catálogo irregular

Reúne al menos seis imágenes deliberadamente dispares: alguna vertical, alguna horizontal, alguna muy grande, alguna pequeña. Puedes usar fotos reales de tu tema.

Consigue que el catálogo se vea coherente sin editar los archivos:

  1. Todas las tarjetas con la misma altura de imagen.
  2. Ninguna imagen deformada.
  3. Nada se sale a 320 px.
  4. Comprueba las verticales: si cover les corta la cabeza a las fotos, ajústalo con object-position.
  5. Explica en un comentario por qué has elegido cover o contain.
Estoy atascado · las imágenes se ven aplastadas

Si has dado width y height a la vez sin object-fit, el navegador estira la imagen hasta esa caja. Añade object-fit: cover.

Y si el problema aparece solo al estrechar la ventana, lo más probable es que te falte height: auto junto al max-width: 100%.

Antes de cerrar · 2 minutos, sin mirar

  1. ¿Qué par de declaraciones evita que una imagen desborde y se deforme?
  2. ¿Qué diferencia hay entre cover y contain?
  3. ¿Qué ventaja tiene aspect-ratio frente a una altura fija?
Ver respuestas

1 · max-width: 100% y height: auto.

2 · cover llena el hueco recortando lo que sobra; contain mete la imagen entera y deja huecos.

3 · Que la altura se calcula a partir del ancho, así que la proporción se mantiene en cualquier tamaño de columna.