Maintenir les proportions avec une largeur ou une hauteur de 100 % en CSS

Lorsque nous utilisons CSS, nous devons souvent définir la largeur ou la hauteur des images à 100 %. Cependant, cela pourrait entraîner une distorsion de l’image. Cela se produit parce que le rapport hauteur/largeur (la relation proportionnelle entre la largeur et la hauteur de l'image) n'est pas conservé.

Pour préserver le rapport hauteur/largeur tout en utilisant une largeur ou une hauteur de 100 %, nous devons limiter la taille de l'image dans un format manière spécifique. Si nous définissons une seule dimension (largeur ou hauteur) sur une image, le rapport hauteur/largeur est automatiquement conservé.

Cependant, si nous définissons à la fois la largeur et la hauteur à 100 %, l'image peut devenir trop grande pour notre l'espace prévu. Dans ce cas, nous pouvons placer l'image à l'intérieur d'un DIV avec une largeur ou une hauteur maximale qui correspond à nos besoins. Nous pouvons ensuite utiliser la propriété overflow:hidden pour recadrer toute partie de l'image qui s'étend au-delà des dimensions spécifiées.

Alternativement, nous pouvons utiliser les propriétés max-width et max-height pour contrôler la taille maximale de l'image. image. En définissant ces valeurs sans définir de dimensions minimales, nous garantissons que l'image ne se déformera pas et ne dépassera pas les dimensions maximales spécifiées.