Comment ajuster parfaitement une image dans une division tout en préservant les proportions ?

Maintenir les proportions de l'image dans un div

Question :

Comment peut-on adapter parfaitement une image dans un div élément tout en préservant ses proportions, en garantissant qu'aucune partie de l'image n'est recadrée ou déformée ?

Réponse :

Pour y parvenir en utilisant CSS, utilisez les propriétés suivantes :

img {
  max-height: 100%;
  max-width: 100%;
}

1. max-height: 100%; : Définit la hauteur maximale de l'image à 100 % de son div conteneur. Cela garantit que l'image ne dépassera pas la hauteur du div.
2. max-width : 100 %; : similaire à max-height, mais pour la largeur. Cela définit la largeur maximale de l'image à 100 % de son div conteneur.

Explication :

En combinant ces deux propriétés, l'image sera effectivement réduite pour s'adapter au div tout en conservant son rapport hauteur/largeur d'origine. L'image sera réduite proportionnellement, garantissant qu'aucune partie n'est recadrée ou déformée.

Remarques supplémentaires :

1. Si vous souhaitez centrer l'image dans le div , ajoutez la propriété CSS suivante :

img {
  ...
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

2. Vous pouvez également utiliser la propriété object-fit pour obtenir des résultats similaires, même si elle n'est pas prise en charge dans tous les navigateurs.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!