How to dynamically change the width and height of DIV based on content using CSS

December 29, 2020 admin

In this tutorial, we are going to see how to dynamically change the width and height of DIV based on content using CSS. You can simply use the CSS display property with the inline-block value to create a <div> no larger than its content (i.e. adjust the size to its content). Let’s try the following example to see how it works:

CSS Code:

img {
    border: 20px solid white;
}

.container {
    display: inline-block;
    border: 20px solid #000;
}

HTML Code:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Adjust the size of DIV to its content</title>
		<style>
			/* Put the CSS Style Here */
		</style>
	</head>
	<body>
		<div class="container">
			<img src="https://1.bp.blogspot.com/-RAj_WmWtT5A/XSY-zUdWKbI/AAAAAAAAFFM/MzWiRE8G3m8k6aYHr9nsxfOzjiK5ZPzmwCLcBGAs/s1600/test.jpg">
		</div>
	</body>
</html>