Nous définissons mydiv sur hauteur et largeur automatiques pour permettre"/> Nous définissons mydiv sur hauteur et largeur automatiques pour permettre">
recherche

Maison  >  Article  >  interface Web  >  Comment redimensionner automatiquement une image pour l'adapter à un conteneur div en utilisant CSS ?

Comment redimensionner automatiquement une image pour l'adapter à un conteneur div en utilisant CSS ?

WBOY
WBOYavant
2023-09-09 22:01:011129parcourir

Pour redimensionner automatiquement l'image pour l'adapter au conteneur div, nous définissons la balise CSS fproperty ou img suivante -

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

Tout d'abord, nous définissons l'image en utilisant la balise img dans le div mydiv -

<div id="myDiv">
   <img src="https://www.tutorialspoint.com/behave/images/behave.jpg">
</div>

Nous définissons mydiv sur hauteur et largeur automatiques pour permettre le redimensionnement automatique du div -

#myDiv {
   height: auto;
   width: auto;
   border: 2px solid blue;
}

L'image dans mydiv a désormais les propriétés CSS suivantes max-width et max-height définies pour permettre un redimensionnement automatique sans aucun problème -

#myDiv img {
   max-width: 100%;
   max-height: 100%;
   margin: auto;
   display: block;
}

Exemple

Voyons maintenant un exemple complet de redimensionnement automatique d'une image pour l'adapter à un conteneur div à l'aide de CSS -

<!DOCTYPE html>
<html>
<head>
   <style>
      #myDiv {
         height: auto;
         width: auto;
         border: 2px solid blue;
      }
      #myDiv img {
         max-width: 100%;
         max-height: 100%;
         margin: auto;
         display: block;
      }
   </style>
</head>
<body>
   <div id="myDiv">
      <img src="https://www.tutorialspoint.com/behave/images/behave.jpg">
   </div>
</body>
</html>

Sortie

如何使用 CSS 自动调整图像大小以适合 div 容器？

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!

css auto
Déclaration：
Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer
Article précédent：Positionnement des éléments HTML à l'aide de CSSArticle suivant：Positionnement des éléments HTML à l'aide de CSS

Articles Liés

Voir plus