Overflow, object-fit y aspect-ratio

Tres propiedades que responden la misma pregunta desde ángulos distintos: ¿qué pasa cuando el contenido y su caja no se ponen de acuerdo? Con estas tres cierras los fundamentos de CSS — y de paso aprendes a domesticar el problema #1 de todo sitio real: las imágenes que llegan en tamaños imprevisibles.

overflow: cuando el contenido no cabe

Por defecto, el contenido que no cabe se DESBORDA visible (CSS prefiere mostrar de más que esconder información). overflow te da el control:

<div class="caja visible"><strong>visible</strong> (default): me desbordo sin pedir permiso, encima de lo que haya</div>
<div class="caja auto"><strong>auto</strong>: si no quepo, aparece scroll — la opción segura. Mira: uno, dos, tres, cuatro, cinco, seis, siete, ocho renglones de relleno para forzar el scroll de esta cajita.</div>
<div class="caja hidden"><strong>hidden</strong>: lo que no cabe se corta. Útil y peligroso: este texto sigue aquí pero jamás lo leerás completo porque</div>

body { font-family: system-ui; padding: 24px; color: #1e293b; display: flex; gap: 16px; }
.caja { width: 180px; height: 130px; padding: 12px; border: 2px solid #6d28d9; border-radius: 8px; background: #f5f3ff; font-size: 14px; }
.visible { overflow: visible; }
.auto { overflow: auto; }
.hidden { overflow: hidden; }

object-fit: la imagen y su marco

El problema eterno: tu diseño tiene tarjetas con imágenes de 300×200, pero las fotos llegan en mil tamaños distintos. Sin ayuda, width + height las DEFORMA. object-fit decide cómo se acomoda la imagen dentro del marco:

<figure>
<img class="fill" src="https://placehold.co/400x150/6d28d9/ffffff?text=original+ancha" alt="Demostración: la imagen deformada" width="180" height="180">
<figcaption>fill: deforma</figcaption>
</figure>
<figure>
<img class="cover" src="https://placehold.co/400x150/6d28d9/ffffff?text=original+ancha" alt="Demostración: la imagen recortada sin deformar" width="180" height="180">
<figcaption>cover: recorta</figcaption>
</figure>
<figure>
<img class="contain" src="https://placehold.co/400x150/6d28d9/ffffff?text=original+ancha" alt="Demostración: la imagen completa con franjas" width="180" height="180">
<figcaption>contain: completa</figcaption>
</figure>

body { font-family: system-ui; padding: 24px; color: #1e293b; display: flex; gap: 16px; }
figure { margin: 0; text-align: center; font-size: 13px; }
img { border-radius: 8px; background: #e2e8f0; display: block; margin-bottom: 4px; }
.fill { object-fit: fill; }
.cover { object-fit: cover; }
.contain { object-fit: contain; }

• fill (default): estira hasta llenar. Deforma — casi nunca lo quieres.
• cover: llena el marco recortando lo que sobre, sin deformar. El rey de las tarjetas, avatares y galerías.
• contain: muestra la imagen COMPLETA, dejando franjas si la proporción no coincide. Para logos y diagramas donde recortar es inaceptable.

aspect-ratio: la proporción como ley

Antes, mantener una caja "siempre 16:9" requería trucos con padding. Hoy es una línea:

El trío width + aspect-ratio + object-fit: cover es LA fórmula de las imágenes profesionales: proporción garantizada, cero deformación, con cualquier foto que llegue.

Mini-reto

Dale a la imagen de la noticia principal de tu periódico la fórmula completa: width: 100%, aspect-ratio: 16 / 9, object-fit: cover y esquinas redondeadas con border-radius + overflow: hidden en su contenedor. Cámbiale el src a cualquier imagen de otra proporción y comprueba que el diseño no se inmuta.

Qué sigue

Fundamentos de CSS completos: conexión, selectores, cascada, herencia, box model, unidades, colores, display y overflow. El reto de módulo te espera: replicar una tarjeta de precios real, píxel a píxel, desde una imagen. Todo lo que necesitas ya está en tu caja de herramientas.