This content originally appeared on DEV Community and was authored by Andres Parra
Puedes leer todo el articulo en mi sitio web byandrev.dev.
Uno de los elementos fundamentales en el diseño de interfaces web es el aspect ratio o relación de aspecto. En pocas palabras, el aspect ratio se refiere a la proporción entre la altura y el ancho de un elemento, este elemento pueden ser imágenes o videos.
Algunos de los aspect ratio más conocidos son los siguientes:
En CSS
Para definir el aspect ratio de un elemento debes hacer lo siguiente:
selector {
aspect-ratio: ancho / alto;
}
Mantener el aspect ratio en una imagen
.image {
width: 100%;
aspect-ratio: 16 / 9;
}
Accesibilidad
Con el aspect ratio evitamos el layout shift, este es algo muy incómodo que suele suceder en los sitios webs. El layout shift hace referencia al movimiento inesperado del contenido de la web cuando los elementos están cargando.
Aquí tienes un ejemplo sin el uso del aspect ratio y otro con esta propiedad, cuando no se usa el botón se traslada cuando carga la imagen, a esto se le conoce como layout shift.
This content originally appeared on DEV Community and was authored by Andres Parra
Andres Parra | Sciencx (2025-07-24T15:50:25+00:00) Entiende el Aspect Ratio en CSS. Retrieved from https://www.scien.cx/2025/07/24/entiende-el-aspect-ratio-en-css/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.