Imágenes sin deformar con CSS: aspect-ratio y object-fit

Una galería o una lista de productos se ve ordenada cuando todas las fotos miden lo mismo. Pero las fotos casi nunca tienen la misma proporción, y si fuerzas el ancho y el alto, se estiran como en un espejo de feria. Tener imágenes sin deformar es cuestión de dos propiedades de CSS: una para la caja y otra para lo que va dentro.

Tres cajas cuadradas, tres resultados

<div class="fila">
  <figure><img class="estirada" src="https://decodigo.com/wp-content/uploads/2026/10/decodigo_placa_raspberry-pi-5.jpg" alt="Placa Raspberry Pi 5"><figcaption>fill (sin nada)</figcaption></figure>
  <figure><img class="cubre" src="https://decodigo.com/wp-content/uploads/2026/10/decodigo_placa_raspberry-pi-5.jpg" alt="Placa Raspberry Pi 5"><figcaption>cover</figcaption></figure>
  <figure><img class="contiene" src="https://decodigo.com/wp-content/uploads/2026/10/decodigo_placa_raspberry-pi-5.jpg" alt="Placa Raspberry Pi 5"><figcaption>contain</figcaption></figure>
</div>

body { font-family: system-ui, sans-serif; }
.fila { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
figure { margin: 0; font-size: 0.85rem; color: #5b6b7c; }
img {
  display: block;
  width: 100%;
  aspect-ratio: 1;          /* una caja cuadrada, mida lo que mida la foto */
  border-radius: 8px;
}
.cubre    { object-fit: cover; }    /* llena la caja y recorta lo que sobra */
.contiene { object-fit: contain;    /* cabe entera; sobra espacio */
            background: #eef3f9; }

La foto mide en proporción 1.52 (más ancha que alta) y las tres cajas miden 1.00: cuadradas. Medido en los tres navegadores. La diferencia está en object-fit:

• fill (lo que hace el navegador si no dices nada): estira la foto para llenar la caja. Se deforma.
• cover: la agranda lo justo para cubrir toda la caja, sin deformarla, y recorta lo que sobra. Es lo que quieres casi siempre en galerías, tarjetas y fotos de perfil.
• contain: la achica hasta que cabe entera. No recorta nada, pero deja franjas vacías. Úsalo con logotipos o productos que no se pueden cortar.

aspect-ratio: la caja, antes que la foto

aspect-ratio: 1 hace la caja cuadrada; aspect-ratio: 16 / 9, panorámica; 4 / 3, de foto clásica. Con width: 100%, el alto sale solo, a cualquier ancho de pantalla. Es mejor que fijar un height en píxeles, que en el celular deja las fotos aplastadas.

object-position: qué parte se ve

/* Retratos: que no corte las caras */
.perfil {
  object-fit: cover;
  object-position: 50% 20%;   /* centrada en horizontal, arriba en vertical */
}

Con cover, el navegador recorta desde el centro. Si lo importante está arriba (una cara) o a un lado, object-position mueve el encuadre: acepta porcentajes, píxeles o palabras como top y left.

Cada fragmento de HTML de esta página pasó por el Nu Html Checker 26.11.4 (el validador del W3C) y cada resultado se pintó y se midió en Chromium, Firefox y WebKit antes de publicarla. Prueba tus cambios en el editor de HTML y CSS o aprende desde cero con el curso.