Comment redimensionner automatiquement une image pour l’adapter à un bloc DIV avec CSS

Vous pouvez simplement appliquer la propriété max-width pour redimensionner automatiquement une grande image afin qu’elle puisse s’adapte à un bloc DIV tout en maintenant ses proportions. Vous pouvez également appliquer la propriété max-height si vous avez un bloc DIV de hauteur fixe, afin que l’image ne déborde pas.
 
 

Code source :
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Comment redimensionner automatiquement une image pour l'adapter à un bloc DIV</title>
		<style>
			img{
				max-width: 100%;
				max-height: 100%;
				display: block;
			}
			.container{
				width: 250px;        
				border: 5px solid black;
			}    
		</style>
	</head>
	<body>
		<h3>Auto adapter la taille de l'image au bloc div</h3>
		<div class="container">
			<img src="https://1.bp.blogspot.com/-w-wLWap_ydk/XSZZ3wSKtcI/AAAAAAAAFFY/-BWB5LvxBA0imZ8uMw-XvTmsw8k7Pk1uQCLcBGAs/s400/test1.jpg">
		</div>
	</body>
</html>
Résultat

Auto adapter la taille de l'image au bloc div

 

Partagez cet article

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *