Maison > interface Web > tutoriel CSS > Comment ajuster une image à l'intérieur d'une division tout en conservant les proportions ?

Comment ajuster une image à l'intérieur d'une division tout en conservant les proportions ?

Susan Sarandon
Libérer: 2024-11-09 19:19:02
original
791 Les gens l'ont consulté

How to Fit an Image Inside a Div While Maintaining Aspect Ratio?

Ajuster une image dans un div tout en conservant les proportions

Pour atteindre l'objectif d'ajuster une image de manière transparente dans un div désigné tout en préservant son le rapport hauteur/largeur, les techniques HTML et CSS peuvent être utilisées efficacement.

Solution :

Pour obtenir ce comportement souhaité, attribuez les propriétés CSS suivantes à l'élément d'image qui réside dans le div :

  • max-height : 100%; : Ceci limite la hauteur verticale de l'image à la hauteur du div, garantissant ainsi ne dépasse pas l'espace disponible.
  • max-width : 100%; : De même, cette propriété limite la largeur horizontale de l'image à la largeur du div, l'empêchant de déborder.

En incorporant ces paramètres CSS, l'image sera automatiquement réduite pour s'adapter confortablement aux dimensions du div sans déformer son rapport hauteur/largeur d'origine. Cela garantit que l'image reste visible dans son intégralité, en respectant les contraintes spatiales spécifiées.

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!

source:php.cn
Déclaration de ce site Web
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
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal