En tant que développeur Web, vous vous retrouvez souvent confronté au dilemme de travailler avec des éléments HTML qui, contrairement à l'élément img par exemple, n'ont ni une taille ni un rapport hauteur/largeur fixe. Souvent, vous souhaitez vous assurer que ces objets se comportent de manière réactive, mais que la proportion entre la largeur et la hauteur est conservée. Par défaut, CSS ne propose pas ici de solution intuitive. Mais avec l'aide de la propriété de remplissage vertical, vous pouvez atteindre votre objectif.
Prenons l'exemple courant des images carrées de produits. Bien que ces images ne soient pas nécessairement carrées, nous souhaitons les afficher au format 1:1 sans effort supplémentaire ni distorsion, et leur largeur (et donc leur hauteur) doit s'adapter automatiquement à la taille de l'écran. Le code suivant permet de réaliser cela facilement en CSS, sans balisage supplémentaire.:
1bc3a80de3db90cdf0535541236d95f2
Avec le résultat:
Mais pourquoi cela fonctionne-t-il et comment créer d’autres formats d’image ? La clé réside dans la propriété padding, qui - spécifiée en pourcentages - est toujours basée sur la même valeur de base que la propriété width (à savoir la largeur de l'élément parent). Ceci est évident pour padding-left et padding-right, surprenant pour padding-top et padding-bottom, 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: