Como desarrollador web, a menudo te encuentras trabajando con elementos HTML que, a diferencia del elemento `img`, no tienen un tamaño ni una proporción fijos. Con frecuencia, deseas que estos objetos se adapten a diferentes dispositivos manteniendo la proporción entre ancho y alto. CSS no ofrece una solución intuitiva por defecto. Sin embargo, la propiedad `vertical padding` puede lograrlo.
Consideremos el ejemplo cotidiano de las imágenes cuadradas de productos. Si bien los gráficos en sí no son necesariamente cuadrados, nos gustaría mostrarlos con una relación de aspecto 1:1 sin esfuerzo ni distorsión, y que su ancho (y por lo tanto, su alto) se adapte automáticamente. El siguiente código facilita lograr esto usando CSS sin necesidad de marcado adicional.:
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: