Como desarrollador web, a menudo te encuentras con el dilema de trabajar con elementos HTML que, a diferencia del elemento img, por ejemplo, no tienen ni un tamaño fijo ni una relación de aspecto fija. A menudo desea asegurarse de que estos objetos se comporten de manera receptiva, pero manteniendo la proporción entre ancho y alto. De forma predeterminada, CSS no ofrece una solución intuitiva aquí. Pero con la ayuda de la propiedad de relleno vertical puedes lograr tu objetivo.
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 esto y cómo se pueden crear otras relaciones de aspecto? La clave para esto está en la propiedad padding, que, especificada en valores porcentuales, siempre se basa en el mismo valor básico que la propiedad Ancho (es decir, el ancho del elemento principal). Esto es obvio para padding-left y padding-right, sorprendente para padding-top y padding-bottom, pero muy útil 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: