How to Auto-resize an Image to Fit into a DIV Container using CSS

December 28, 2020 admin

In this tutorial, we are going to see how to Auto-resize an Image to Fit into a DIV Container using CSS. You can easily apply the max-width attribute to automatically resize a big image so it can fit a DIV bloc while keeping its proportions. You can also apply the max-height property if you have a fixed-height DIV container so that the image does not overflow.

Source Code:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>How to Auto-resize an Image to Fit into a DIV Container</title>
		<style>
			img{
				max-width: 100%;
				max-height: 100%;
				display: block;
			}
			.container{
				width: 250px;        
				border: 5px solid black;
			}    
		</style>
	</head>
	<body>
		<h3>Auto-resize the Image to Fit into a DIV Container</h3>
		<div class="container">
			<img src="https://1.bp.blogspot.com/-w-wLWap_ydk/XSZZ3wSKtcI/AAAAAAAAFFY/-BWB5LvxBA0imZ8uMw-XvTmsw8k7Pk1uQCLcBGAs/s400/test1.jpg">
		</div>
	</body>
</html>