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

juillet 11, 2019décembre 19, 2023 Amine KOUIS Aucun commentaire

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>