Maison >interface Web >tutoriel CSS >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 ?
- WBOYavant
- 2023-09-09 22:01:011153parcourir
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
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!