Relación de aspecto fija para elementos HTML

Como desarrollador web, a menudo uno se avergüenza de trabajar con elementos HTML que por sí mismos, en contraste con el elemento img, por ejemplo, no tienen un tamaño fijo ni una relación de aspecto fija. A menudo desea lograr que estos objetos se comporten de manera receptiva, pero se mantiene la proporción entre ancho y alto. CSS no ofrece una solución intuitiva aquí de forma predeterminada. Pero con la ayuda de la propiedad de relleno vertical puede lograr su objetivo.


Tomemos el ejemplo cotidiano de las imágenes de artículos cuadrados, cuyos gráficos no son necesariamente cuadrados, pero nos gustaría mostrarlos con la relación de aspecto 1: 1 sin esfuerzo adicional y sobre todo sin distorsión, por lo que su ancho (y por lo tanto también su altura) cambia de manera sensible debería. Con el siguiente código es muy fácil hacer esto sin marcas adicionales con la ayuda de CSS:

1bc3a80de3db90cdf0535541236d95f2

con el resultado

 

Pero, ¿por qué funciona y cómo se pueden crear otras relaciones de aspecto? La clave de esto radica en la propiedad de relleno, que, dada en valores porcentuales, siempre se basa en el mismo valor básico que la propiedad Width (es decir, el ancho del elemento principal). Con padding-left y padding-right esto es obvio, con padding-top y padding-bottom sorprendentes, pero muy útiles en este caso.

Si desea una relación de aspecto de 16: 9, por ejemplo, elija los valores ancho: 100%; padding-bottom: 56.25%;. Una relación de aspecto que tiene en cuenta la proporción áurea es ancho: 100%, padding-bottom: 61,81%; realizable.

Con la ayuda de calc , puede especificar directamente la relación de aspecto, por ejemplo, para 16: 9 con padding-bottom: calc (1 / (16/9) * 100%). Si el elemento consta de otros elementos anidados, el elemento secundario se coloca absolutamente para compensar el relleno del elemento principal:

1bc3a80de3db90cdf0535541236d95f2

Esto conduce al siguiente resultado:

...
Atrás