Cómo mantener la proporción con aspect-ratio en CSS
¿Qué es aspect-ratio y cómo se utiliza?
aspect-ratio establece la relación de aspecto de un elemento, controlando cómo se dimensiona en función de su ancho o alto. Se especifica con un valor numérico que representa la proporción (por ejemplo, 16 / 9 para un formato de video estándar o 1 / 1 para un cuadrado).
Sintaxis básica:
.elemento {
aspect-ratio: 16 / 9;
}En este ejemplo, el contenedor siempre tendrá una proporción de 16 unidades de ancho por 9 de alto, adaptándose automáticamente al tamaño disponible.
Ejemplos de uso con aspect-ratio
1. Caja con relación 1:1 (cuadrado):
.cuadrado {
width: 200px;
aspect-ratio: 1 / 1;
background-color: lightblue;
}Crea un contenedor cuadrado que mantendrá su proporción 1:1 sin importar el tamaño de su contenedor.
2. Video con proporción de 16:9:
.video {
aspect-ratio: 16 / 9;
width: 100%;
}Ideal para videos de formato widescreen, ajustando su altura automáticamente para mantener la proporción.
3. Contenedor adaptable con 4:3:
.contenedor {
width: 50%;
aspect-ratio: 4 / 3;
background-color: lightgreen;
}Este contenedor tendrá una relación de 4:3, ajustándose proporcionalmente al 50% del ancho disponible.
4. Imágenes con proporción fija:
.imagen {
aspect-ratio: 3 / 2;
object-fit: cover;
}
Combinando aspect-ratio con object-fit, se asegura que la imagen se mantenga en una proporción de 3:2, rellenando el contenedor sin deformaciones.
Consideraciones sobre el uso de aspect-ratio
-
Se puede usar con cualquier tipo de contenedor:
<div>,<figure>,<img>, entre otros. -
Si se define tanto el ancho como el alto del elemento, la propiedad
aspect-ratioserá ignorada. - Es ideal para crear contenedores responsivos, evitando el uso de rellenos y márgenes complicados para mantener la proporción.
Referencia oficial
Para más detalles, visita la documentación oficial de MDN sobre aspect-ratio.
Jorge García
Fullstack developer