Comment empêcher les images de rétrécir de manière disproportionnée lors du redimensionnement du navigateur ?

CSS : réduction des images lors du redimensionnement du navigateur

Lors de la configuration des images via le panneau d'administration, les utilisateurs peuvent rencontrer un problème où les images rétrécissent de manière disproportionnée lorsque le la fenêtre du navigateur est redimensionnée. Ce problème peut être résolu en comprenant l'interaction entre les propriétés CSS et les proportions de l'image.

Les règles CSS fournies incluent initialement les propriétés max-width et height, ce qui peut entraîner un rétrécissement indésirable lorsque le navigateur est redimensionné. Pour éviter cela, il faut spécifier une seule dimension (généralement max-width) et définir l'autre sur auto.

Exemple :

.users-list > li img {
  border-radius: 50%;
  max-width: 100%;
  height: auto;
}

Cette approche conserve la rapport hauteur/largeur de l'image tout en lui permettant de s'adapter de manière appropriée à l'espace disponible. Comme le montre l'exemple « correct » ci-dessous, l'image conserve ses proportions et ne s'étire ni ne rétrécit excessivement.

Incorrect :

max-width: 100%;
width: 100px;
height: 100px;

Correct :

max-width: 200px;
height: auto;

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!