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;
}
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>
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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
