Los banners, las miniaturas y los espacios de héroe comparten un modo de falla: los medios llegan tarde, la caja colapsa y la página de abajo cambia. La relación de aspecto convierte esa caja en una promesa que el propio motor cumple, lo cual es un contrato genial para una sola declaración.
/* both of these hold their shape before and after load */
.banner { aspect-ratio: 16 / 9; width: 100%; }
.avatar { aspect-ratio: 1; width: 5rem; }Por qué es mejor que el truco del relleno
/* the old trick: correct math, unreadable by humans */
.media { padding-top: 56.25%; }- La relación de aspecto funciona con cualquier elemento, no solo con imágenes y videos, por lo que las tarjetas, las tiras de pancartas y los mosaicos de íconos obtienen una sola declaración en lugar de un truco de relleno porcentual basado en contenido invisible.
- Los tamaños explícitos ganan: establezca tanto el ancho como el alto y el navegador los respetará; deje el eje transversal automático y la relación mantendrá la caja estable.
- Los elementos reemplazados, como img y video, mantienen su proporción intrínseca como opción predeterminada, por lo que una foto de retrato nunca se extiende para llenar un espacio de paisaje.
Ratios dentro de flex y grilla
El contrato sobrevive al dimensionamiento realizado por otros: una tarjeta cuyo ancho proviene de una pista de cuadrícula aún calcula su altura a partir de la proporción. Cuando un diseño te sorprende allí, mide primero con el inspector de cuadros, porque el culpable habitual es una alineación estirada que establece el eje transversal explícitamente.
Una advertencia que vale la pena señalar: el tamaño del contenido mínimo puede anular la proporción en una fila flexible apretada, así que dé a esos cuadros una base flexible explícita. Agréguelo una vez y la propiedad se mantendrá notablemente estable en cualquier otro lugar donde la use.