Comment ajuster une image dans une division tout en préservant les proportions ?

Préserver les proportions lors de l'ajustement d'une image dans une division

Lorsque vous travaillez avec des conceptions Web, une tâche courante consiste à ajuster une image dans un div tout en conservant ses proportions. Cela garantit que l'image ne sera pas déformée et conservera ses proportions souhaitées. Pour y parvenir en HTML et CSS, nous pouvons utiliser le code suivant :

.my-div {
   width: 48px;
   height: 48px;
   overflow: hidden;
}

.my-img {
   max-height: 100%;
   max-width: 100%;
}

À l'intérieur du CSS, nous définissons une classe pour le div (my-div) avec une largeur et une hauteur fixes. La propriété overflow est définie sur masqué pour masquer tout contenu d'image qui dépasse les limites du div.

Au sein du div, une classe d'image (my-img) est définie. L'astuce ici consiste à définir à la fois la hauteur maximale et la largeur maximale à 100 %. Cela permet à l'image d'occuper pleinement l'espace au sein du div tout en adhérant à son propre rapport hauteur/largeur. Sans ces règles, l'image s'étirerait ou s'écraserait pour s'adapter aux dimensions du div, ce qui entraînerait une distorsion.

En implémentant ce code, vous pouvez réussir à adapter une image dans un div tout en préservant ses proportions. Cette technique est particulièrement utile pour garantir un affichage d'image réactif sur différentes tailles d'écran et appareils.

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!