CSS aspect-ratio y object-fit, con selector de punto focal
Guía de CSS aspect-ratio y object-fit
CSS aspect-ratio y object-fit: demos en vivo y Tailwind | We.Inc
Fija la proporción de una caja con aspect-ratio y luego encaja las fotos dentro con object-fit cover, contain, fill, none o scale-down. Haz clic para elegir un punto focal con object-position.
Dos propiedades resuelven la mayoría de los problemas de tamaño de imágenes. aspect-ratio: 16 / 9 hace que una caja mantenga esa forma con cualquier ancho, y sustituye al antiguo truco del padding-top. object-fit decide cómo una img o un video llena esa caja: cover recorta, contain deja bandas, fill estira. object-position elige qué parte queda visible cuando cover recorta.
Referencia rápida
Objetivo
CSS
Tailwind
Caja cuadrada
aspect-ratio: 1
Forma de video
aspect-ratio: 16 / 9
Cualquier proporción
aspect-ratio: 4 / 3
aspect-4/3 o aspect-[4/3]
Llenar y recortar
object-fit: cover
Mostrarla entera
object-fit: contain
Conservar la parte superior
object-position: top
Abajo, una imagen de prueba está dentro de una caja cuya forma puedes cambiar. Alterna entre los cinco valores de object-fit, haz clic en la imagen para mover el punto focal y copia el CSS o las clases de Tailwind. Más abajo: el truco del padding junto a aspect-ratio, videos incrustados responsive y cuadrículas de tarjetas con miniaturas uniformes.
Elige una proporción para la caja y un valor de object-fit. La vista previa muestra exactamente lo que el navegador recortará o estirará.
Con cover o none seleccionado, haz clic en cualquier punto de la imagen de prueba para poner object-position en ese punto.
Copia el CSS generado, o las clases de Tailwind que hacen lo mismo.
Usa las recetas de cuadrícula de tarjetas y de video de abajo cuando construyas diseños reales.
Pon siempre los atributos width y height en las etiquetas img. Los navegadores los convierten en una proporción antes de que cargue el archivo, así el diseño no salta.
Elige cover para miniaturas y fotos de portada, y contain para logos y fotos de producto donde no se puede cortar nada.
Si una cara sigue quedando recortada, mueve object-position hacia ella en lugar de volver a recortar el archivo de imagen.
aspect-ratio es una forma preferida, no una jaula. Un texto largo dentro de la caja la hace más alta, salvo que pongas min-height: 0 u overflow.
Preguntas frecuentes
¿Cuál es la diferencia entre aspect-ratio y object-fit?
aspect-ratio da forma a la propia caja, en cualquier elemento. object-fit solo se aplica a contenido reemplazado como img, video y canvas, y decide cómo se dibuja ese contenido dentro de su caja. Normalmente usas los dos: aspect-ratio en la imagen para fijar su forma y object-fit: cover para que la imagen la llene.
¿Por qué object-fit no hace nada?
La caja de la imagen tiene la misma proporción que la imagen, así que no hay nada que recortar ni estirar. object-fit solo muestra una diferencia cuando la caja tiene otra forma, por ejemplo una altura fija más width: 100%, o un aspect-ratio distinto al del archivo.
¿Sigo necesitando el truco del padding-top?
No en los navegadores actuales. aspect-ratio funciona en Chrome, Edge, Firefox y Safari desde 2021. Conserva el truco solo si tienes que dar soporte a navegadores antiguos, y consulta caniuse para tu público.
¿Funciona object-fit con imágenes de fondo?
No. Para los fondos CSS, los equivalentes son background-size: cover o contain, y background-position para el punto focal. object-fit es para elementos img y video reales, que son mejores para las imágenes de contenido porque llevan texto alternativo y admiten srcset.
¿Se puede usar aspect-ratio en un div?
Sí. Cualquier elemento lo admite. Un div con width: 100% y aspect-ratio: 1 se convierte en un cuadrado que crece con su columna, algo útil para marcadores de posición de mapas, avatares y skeleton loaders.
Cómo resuelve el navegador aspect-ratio
La proporción solo entra en juego cuando una de las dimensiones es automática. Si fijas un ancho y dejas la altura en auto, el navegador calcula la altura a partir de la proporción. Si fijas ancho y alto, la proporción se ignora, porque ya no queda nada por calcular.
El valor auto 3 / 2 significa usar la proporción natural del elemento cuando la tiene, como una imagen cargada, y recurrir a 3 / 2 antes de que cargue o cuando no tiene ninguna. Así es exactamente como se comportan por dentro los atributos width y height de img.
Elegir un punto focal
object-position acepta los mismos valores que background-position: palabras clave como top o right, porcentajes o longitudes. 50% 50% es el valor por defecto y conserva el centro. Un porcentaje alinea ese punto de la imagen con el mismo punto de la caja, así que 30% 40% conserva la zona situada a un tercio desde la izquierda y un poco por encima de la mitad.
En un sistema de contenidos, guarda el punto focal de cada imagen como dos porcentajes y escríbelo en un estilo en línea. Así cada recorte del sitio mantiene al sujeto en el encuadre, sea cual sea la proporción que use el diseño.
aspect-ratio junto al truco del padding
Antes de aspect-ratio, una caja obtenía su forma de padding-top en porcentaje, porque los porcentajes de padding vertical se miden respecto al ancho. Funciona, pero el contenido tiene que posicionarse de forma absoluta dentro. Las dos cajas de abajo son 16:9.
Lo antiguo y lo nuevo, mismo resultado
56.25% es 9 dividido entre 16. La versión moderna necesita una sola línea y deja que el contenido fluya con normalidad.
Los cinco valores de object-fit en la misma foto
La imagen es 3:2 y cada caja es cuadrada, así que cada valor tiene que resolver un desajuste y las diferencias se ven con claridad.
Valores de object-fit
Valor
Qué pasa
Tailwind
Estira la imagen hasta la caja. Es el valor por defecto de img y video. Deforma la imagen cuando las proporciones no coinciden.
Escala toda la imagen para que quepa dentro de la caja. Deja bandas vacías (letterboxing) cuando las proporciones no coinciden.
Escala la imagen para llenar la caja y recorta lo que sobra. Sin deformación ni bandas, pero se corta parte de la imagen.
Mantiene la imagen a su tamaño natural y recorta lo que no cabe. Útil para mostrar un detalle a 1:1.
Actúa como none o contain, el que dé el resultado más pequeño. Nunca amplía una imagen pequeña.
fill, contain, cover, none, scale-down
La misma imagen de 300 por 200 en cinco cuadrados de 110 píxeles. Fíjate en el punto rojo: es el sujeto que cover no debe perder.
Video e incrustaciones responsive
Un iframe al estilo YouTube que mantiene 16:9
Dale al iframe un ancho del 100% y un aspect-ratio. No hace falta un div contenedor ni posicionamiento absoluto.
Cuadrículas de tarjetas con miniaturas uniformes
Todas las miniaturas con la misma forma
Las imágenes subidas llegan con todo tipo de formas. aspect-ratio junto con object-fit: cover ordena la cuadrícula sin editar ni un solo archivo.
Clases de Tailwind para proporción y encaje
Utilidades de Tailwind v4 (consulta la documentación de v3 si usas una versión anterior)
CSS
Tailwind
aspect-ratio: 1 / 1
aspect-ratio: 16 / 9
aspect-ratio: auto
aspect-ratio: 3 / 2
aspect-3/2 (v4) o aspect-[3/2]
object-fit: cover / contain / fill
object-cover / object-contain / object-fill
object-fit: none / scale-down
object-none / object-scale-down
object-position: center / top / bottom
object-center / object-top / object-bottom
object-position: 30% 40%
object-[30%_40%]
Estira la imagen hasta la caja. Es el valor por defecto de img y video. Deforma la imagen cuando las proporciones no coinciden.
Escala toda la imagen para que quepa dentro de la caja. Deja bandas vacías (letterboxing) cuando las proporciones no coinciden.
Escala la imagen para llenar la caja y recorta lo que sobra. Sin deformación ni bandas, pero se corta parte de la imagen.
Mantiene la imagen a su tamaño natural y recorta lo que no cabe. Útil para mostrar un detalle a 1:1.
Actúa como none o contain, el que dé el resultado más pequeño. Nunca amplía una imagen pequeña.
Zona de pruebas de proporción, encaje y punto focal
Imagen original (3:2). Haz clic en ella, o ponle el foco y usa las flechas del teclado, para elegir el punto focal.
Elegir punto focal, ahora {pos}
Paisaje de prueba con un punto rojo como sujeto
Volver al centro
Resultado en una caja {ratio} con object-fit: {fit}
Proporción de la caja
El punto focal importa sobre todo con cover y none. Con contain o scale-down decide dónde van las bandas vacías.
Copiar CSS
Copiar clases
¿Necesitas el tamaño exacto en píxeles para una proporción? Usa la