Relaciones de Aspecto Perfectas en CSS

O, cmo aprend a dejar de preocuparme y amar el padding

Ya sea que estemos desarrollando una web o la interfaz de una aplicacin, las relaciones de aspecto son algo por lo que no tenemos que preocuparnos mucho. Hasta que el cliente nos pasa un video que quiere que sea vea sin bandas negras, o nos explican que la imagen tiene que estar s o s en una relacin de 1:1.

Qu es la relacin de aspecto?

La relacin de aspecto es la relacin que hay, proporcionalmente, entre el alto y el ancho de un elemento. Esta relacin se suele expresar como la fraccin de ancho sobre alto. Por ejemplo, para un elemento que tiene 1:1 su ancho es igual a su altura. Sin embargo un elemento que tiene 4:3 como relacin de aspecto*, el ancho es 1.33 veces mas grande (porque 4 sobre 3, es 1.33).*

Algunas de las ms conocidas y populares siendo:

• 4:3 Televisores de tubo viejos , y la relacin nativa de los VHS
• 16:9 Monitores, celulares en horizontal, laptops, y televisores smart en promedio (cualquiera que no sea widescreen).
• 9:16 Los celulares en vertical y con ellos, todas los videos filmados verticalmente como el contenido de TikTok
• 1:1 Las imgenes del feed de Instagram y las fotos Polaroid.

Relaciones de Aspecto en CSS

Excelente, ahora que sabemos que es una relacin de aspecto 1:1, podemos forzar un alto que corresponda al ancho y listo no?
Si un elemento tiene 1100px de ancho (width: 1100px) le agregamos 1100px de alto (height: 1100px), tiene la relacin de aspecto que queramos, 1:1 pero si el tamao de la pantalla cambia, tambin deberamos cambiar el alto para preservar la relacin de aspecto. Esta solucin es vlida pero **no es responsiva.

Necesitamos alguna regla de CSS que automticamente mute en base al ancho, pero que tenga influencia en el alto.

El padding porcentual de un elemento es relativo al ancho de su padre

Una propiedad bastante interesante y poco intuitiva es que el tamao del padding cuando las unidades son porcentuales corresponde al ancho del elemento . Esto que a simple lectura parece algo muy chico nos permite calcular un alto, en base a un ancho !

Si pueden ver a donde vamos con esto, si a un elemento de 100px de ancho, le agregamos un hijo con alto automtico (height: auto) y le damos 100% de padding-top, el alto de este elemento va a ser 100px (1:1). Tad!

Relaciones de aspecto ms complejas

En caso de tener por ejemplo el pantallazo de una pelcula, filmada en 16:9, mi elemento tiene que tener la misma relacin de aspecto si quiero que se vea sin bandas negras.

Para calcularlo dividimos el alto, por el ancho: 9/16 = 0.5625 (padding-top: 56.25%).

Tambien podemos usar la funcin calc() para automatizar el proceso de clculo del padding.

.aspect-ratio-16-9 {    height: auto;    padding-top: 56.25%;}.aspect-ratio-1-1 {    height: auto;    padding-top: 100%;}/* O haciendo uso de calc() */.aspect-ratio-4-3 {    height: auto;    padding-top: calc(100% * (3 / 4));}.aspect-ratio-9-16 {    height: auto;    padding-top: calc(100% * (16 / 9));}

Pero el padding empujara todo el contenido hacia abajo no?

Exacto, vamos a tener que volver a acomodar a los hijos de este elemento usando la ayuda de posicionamiento absoluto .

Supongamos que dentro de nuestro elemento con la relacin de aspecto 16:9 tenemos que agregar una imagen, lo nico que tenemos que hacer es darle un posicionamiento relativo al padre, y acomodar la imagen para que ocupe todo el tamao provisto por l.

<div class="aspect-ratio-parent">    <div class="aspect-ratio-16-9">        <img src="http://placehold.it/1920x1080?text=16:9"/>        </div></div>

.aspect-ratio-16-9 {    height: auto;    padding-top: 56.25%;    position: relative;}.aspect-ratio-16-9 img {    position: absolute;    top: 0;    left: 0;    right: 0;    bottom: 0;    object-fit: cover; }

Hay alguna manera de evitarme hacer yo el clculo?

S, calc(), pero si necesitas un amigo que te ayude con los ratios, RatioBuddy recibe el tamao del elemento del que quieras calcular su relacin de aspecto, y realiza los clculos por nosotros. Al final, nos deja el SCSS listo para copiar y pegar .
En caso de que no sepas como usar SCSS (Sass), pega el resultado de RatioBuddy en Sassmeister.

Level Up!

Usando pseudo elementos y variables de CSS, podemos agregarle a nuestros elementos una relacin de aspecto, usando solo una clase.

Explicacin

• Al crear un ::before dinmicamente, nos ahorramos el tener que crear otro el elemento desde el HTML.
• En vez de crear una clase para cada uno de los casos de relacin de aspecto que tengamos que cubrir, hacemos uso de las variables de CSS ponemos --aspect-ratio en el padding-top.
• Calculamos el padding-top con calc() dividiendo el total, lo que venga en la variable --aspect-ratio.
• Como estamos dentro de un calc(), CSS va a dividir al 100% calculando la relacin de aspecto que est en la variable.
• Desde nuestro HTML, vamos a darle valor a esa variable para elemento usando style="--aspect-ratio: n/n".

Pst, tambin podemos pasarle relacin de aspecto, ya dividida, como por ejemplo 1.778 (16/9).

Usando relaciones de aspecto en Frameworks

Si ests usando un framework es probable que ya exista una clase o componente para aprovechar estas relaciones de aspecto responsivas:

• Boostrap: https://getbootstrap.com/docs/4.1/utilities/embed/
• Bulma: https://bulma.io/documentation/elements/image/#responsive-images-with-ratios
• Tailwind: https://github.com/tailwindlabs/tailwindcss-aspect-ratio

Conclusiones y el futuro

Un verdadero truco de CSS, que al aprenderlo vamos a ser los primeros en proponer una solucin a problemas que parecen tener solucin solo con Javascript.
Sin embargo, existe un futuro donde no tenemos que depender de trucos y engaos. La regla de CSS aspect-ratio ya tiene un slido soporte en la mayora de los exploradores conocidos y con el tiempo ese nmero solo va a crecer. Mientras tanto, el Truco del Padding , es responsive y vlido para todos los exploradores que existen.