En tant que développeur Web, on est souvent gêné de travailler avec des éléments HTML qui par eux-mêmes - contrairement à l'élément img, par exemple - n'ont ni une taille fixe ni un rapport hauteur / largeur fixe. Vous voulez souvent que ces objets se comportent de manière réactive, mais la proportion entre la largeur et la hauteur est conservée. CSS n'offre pas ici de solution intuitive par défaut. Mais avec l'aide de la propriété de rembourrage vertical, vous pouvez atteindre votre objectif.
Prenons l'exemple quotidien des images d'articles carrées, dont les graphiques ne sont pas nécessairement carrés, mais nous aimerions les afficher avec le rapport hauteur / largeur 1: 1 sans effort supplémentaire et surtout sans distorsion, où leur largeur (et donc aussi leur hauteur) change en réponse devrait. Avec le code suivant, il est très facile de le faire sans balisage supplémentaire à l'aide de CSS:
1bc3a80de3db90cdf0535541236d95f2
Avec le résultat
Mais pourquoi cela fonctionne-t-il et comment créer d'autres proportions? La clé pour cela réside dans la propriété padding, qui - donnée en pourcentage - est toujours basée sur la même valeur de base que la propriété Width (à savoir la largeur de l'élément parent). Avec padding-left et padding-right c'est évident, avec padding-top et padding-bottom surprenant, mais très utile dans ce cas.
Si vous voulez un rapport hauteur / largeur de 16: 9, par exemple, vous choisissez les valeurs width: 100%; padding-bottom: 56.25%;. Un rapport hauteur / largeur qui prend en compte le nombre d'or est la largeur: 100%, le rembourrage en bas: 61,81%; réalisable.
À l'aide de calc, vous pouvez spécifier directement le rapport hauteur / largeur, par exemple pour 16: 9 avec padding-bottom: calc (1 / (16/9) * 100%). Si l'élément se compose d'autres éléments imbriqués, l'élément enfant est positionné de manière absolue pour compenser le remplissage de l'élément parent:
1bc3a80de3db90cdf0535541236d95f2
Cela conduit au résultat suivant: