Comment conserver les proportions de l'image lors du redimensionnement en CSS ?

Résoudre les problèmes de redimensionnement d'image dans CSS

Lorsque vous êtes confronté à des problèmes de redimensionnement d'image dans le panneau d'administration, il est crucial de comprendre l'interaction des propriétés CSS. Un de ces problèmes se produit lors du redimensionnement d’images initialement affichées parfaitement. Cependant, lors du redimensionnement du navigateur, les images rétrécissent de manière disproportionnée.

Pour résoudre ce problème, la clé est de conserver les proportions des images. Cela signifie permettre à une dimension d’être fixe tout en permettant à l’autre de s’ajuster automatiquement. En épinglant la largeur et en définissant la hauteur sur auto, les proportions d'origine de l'image sont préservées.

Par exemple, considérons l'extrait de code suivant :

img {
  display: block;
}
.correct,
.incorrect {
  border: 1px solid red;
  display: inline-block;
}
.incorrect img {
  max-width: 100%;
  width: 100px;
  height: 100px;
}
.correct img {
  max-width: 100%;
  width: 200px;
  height: auto;
}

Dans cet exemple, le ". La classe "correct" conserve le rapport hauteur/largeur en définissant la largeur sur une valeur fixe (200 px) et en laissant la hauteur s'ajuster automatiquement. Cela garantit que l'image ne s'étire pas lorsqu'elle est redimensionnée.

À l'inverse, la classe ".incorrect" entraîne un étirement de l'image car la largeur et la hauteur sont fixes. Cela perturbe le rapport hauteur/largeur et fait perdre à l'image ses dimensions prévues.

En utilisant les propriétés CSS appropriées, vous pouvez vous assurer que vos images se redimensionnent gracieusement et conservent leur intégrité visuelle quelle que soit la taille de la fenêtre du navigateur.

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!