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

admin December 28, 2020October 10, 2021 0 Comments css background image size to fit div, fit image to div without stretching, image auto resize to fit div container, resize div to fit image, scale to fit image css

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>