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

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

Barbara Streisand
Barbara Streisandoriginal
2024-11-12 17:05:02425parcourir

How to Prevent Images from Shrinking Disproportionately on Browser Resize?

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn