Comment auto adapter la taille d'une image à une div ?
En HTML, si l'on ajoute une image dans une div qui possède des dimensions, l'image va déborder pour s'afficher suivant sa hauteur et sa largeur. S'il y a d'autres éléments à côté de la div, ils peuvent passer par-dessus l'image. Grâce à des propriétés CSS, il est possible de faire en sorte que l'image s'adapte automatiquement aux dimensions de la div pour être visible entièrement sans déborder.
Pour que l'image adapte ses dimensions à celles de la div, il faut utiliser les propriétés max-width et max-height. Elles définissent respectivement la largeur et la hauteur maximale que peut avoir un objet. En indiquant comme valeur 100%, on indique à l'image d'utiliser au maximum les dimensions de son container.
Si l'image est plus petite que la taille de la div, alors l'image gardera ses dimensions d'origine, elle ne s'agrandira pas.
Si la div qui contient l'image n'a pas de hauteur précisée, il est possible d'utiliser la valeur auto pour la propriété height de l'image. Avec cette valeur, la hauteur de l'image sera adaptée automatiquement en fonction de sa largeur, en conservant le ratio d'origine.