In this post, we will learn how to auto resize an image according to div container using CSS.  When we insert an image into a div then image is not fit into a div and it does not change its size according to the div. So how we can auto resize an image according to div, we will learn in this post.


How To Auto Resize An Image According To DIV Container Using CSS ?


Auto Resize An Image According To DIV Container 

To make responsive an image according to its parent div and different-different devices, we use max-width and max-height CSS property. These properties helps us to auto-resize image according to div and other mobile or desktop devices. 


max-width: 100%;  This property helps us to auto resize a large image to fit into a div. 


max-height: 100%;  This property helps us to auto resize an image into a fixed height div container. Using this property, an image doesn't overflow the div's boundary horizontally or vertically. 


<!DOCTYPE html>
<html>
<head>
<title>How To Auto Resize An Image According To DIV Container Using CSS ?</title>
<style>

img{
max-width: 100%;
max-height: 100%;
display: block;
}

div{
width: 300px;
border: 2px solid #000;
}

</style>
</head>
<body>

<div>

<img src="example.jpg" alt="Example Image">

</div>

</body>
</html> code-box

If we increase the width of the div from 300px to 400px then image automatically changes its size according to the div.



Summary

In this post we learned how to auto resize an image according to div container using CSS. You try to make it yourself. I hope you make. If you face any problem, then comment and tell us. Keep visiting the blog to read more similar posts.

Post a Comment

Previous Post Next Post