Comment puis-je conserver les proportions lors du redimensionnement d'images avec CSS ?

Préserver les proportions lors du redimensionnement de l'image

La correction de l'écart de proportion lors du redimensionnement de l'image peut être obtenue grâce à des modifications CSS.

Le code HTML spécifie à l'origine les attributs de largeur et de hauteur de l'image, qui remplacent la règle CSS. Pour permettre au CSS d'avoir la priorité, l'attribut height doit être supprimé.

De plus, la propriété max-width dans la règle CSS limite la largeur de l'image. Cependant, la hauteur n’est pas explicitement définie. Pour garantir le maintien des proportions, la hauteur doit également être limitée, mais de manière à respecter les proportions d'origine.

L'extrait fourni suggère d'utiliser les propriétés CSS display: block, max-width: 230px, max -hauteur : 95 px, largeur : auto et hauteur : auto. Ces paramètres permettent à l'image de s'étendre dans les limites de largeur et de hauteur maximales tout en conservant son rapport hauteur/largeur d'origine. Par conséquent, l'image sera redimensionnée sans distorsion ni recadrage.

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!