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!
programmation multithread Java
Quatre caractéristiques majeures de la blockchain
Trois formes d'instructions conditionnelles
Qu'est-ce que le langage machine
Solution à l'erreur d'échec de récupération
La différence entre une demande d'obtention et une demande de publication
La différence entre le langage pascal et le langage c
Linux ajoute une méthode de source de mise à jour
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
