Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Auto Resize Image to Fit a Div Container using CSS
To auto resize an image to fit a div container, it ensures that the image is scaled properly without affecting its original aspect ratio. It helps in preventing the distortion of image and ensures that image fills the container without stretching or cropping.
In this article we are having a div container and an image. Our task is to auto-resize image to fit the div container using CSS.
Approaches to Auto Resize an Image to Fit div Container
Here is a list of approaches to auto-resize an image to fit the div container using CSS which we will be discussing in this article with stepwise explanation and complete example codes.
- Using object-fit: cover Property
- Using Grid
- Using Aspect Ratio
- Using object-fit: contain Property
- Using max-width Property
Using object-fit: cover Property
To auto-resize an image to fit the div container using CSS, we have used CSS object-fit property. It specifies how an image should be resized or cropped to fit within its container.
- We have used an img tag to insert an image in our HTML document. Then we have placed this image inside the div container.
- Then we have fixed the height, width of the container and added a border of the container.
- Then we have set the height and width of the image to 100%. Using object-fit: cover; we ensure that the image is auto-resized to fit the div container without distorting the image.
Example
Here is a complete example code implementing above mentioned steps to auto-resize an image to fit the div container using CSS object-fit: cover property.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Auto Resize Image</title>
<style>
.container {
width: 300px;
height: 200px;
border: 1px solid black;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
}
</style>
</head>
<body>
<h3>
Auto resizing an Image to Fit a div Container using CSS
</h3>
<p>
In this approach we have used CSS <strong>cover</strong>
value of <strong>object-fit</strong> property to auto
resize the image to fit the div container.
</p>
<div class="container">
<img src="/https/www.tutorialspoint.com/html/images/test.png">
</div>
</body>
</html>
Using Grid
In this approach to auto-resize an image to fit the div container using CSS, we have used the CSS grid properties.
- We have used an img tag to insert an image in our HTML document. Then we have placed this image inside the div container.
- Then we have fixed the height, width of the container and added a border of the container.
- Then we have used display property to use grid layout and place-items: center; centers the image.
- At the end we have set the height and width of the image to 100% to expand the image to cover the container.
Example
Here is a complete example code implementing above mentioned steps to auto-resize an image to fit the div container using CSS grid properties.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Auto Resize Image</title>
<style>
.container {
display: grid;
place-items: center;
width: 300px;
height: 200px;
border: 1px solid black;
}
img {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<h3>
Auto resizing an Image to Fit a div Container using CSS
</h3>
<p>
In this approach we have used CSS <strong>grid</strong>
property to auto resize the image to fit the div container.
</p>
<div class="container">
<img src="/https/www.tutorialspoint.com/html/images/test.png">
</div>
</body>
</html>
Using Aspect Ratio
In this approach we have used the CSS aspect-ratio property to auto-resize an image to fit the div container.
- We have used an img tag to insert an image in our HTML document. Then we have placed this image inside the div container.
- Then we have fixed the width of the container and added a border of the container.
- The image width is set to 100% to fully expand to cover the container's width.
- The aspect-ratio: 16/9; property adjusts the height of the image based on a 16:9 ratio, without distorting the image.
Example
Here is a complete example code implementing above mentioned steps to auto-resize an image to fit the div container using CSS aspect-ratio property.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Auto Resize Image</title>
<style>
.container {
width: 300px;
border: 1px solid brown;
}
img {
width: 100%;
aspect-ratio: 16/9;
}
</style>
</head>
<body>
<h3>
Auto resizing an Image to Fit a div Container using CSS
</h3>
<p>
In this approach we have used CSS <strong>aspect-
ratio</strong> property to auto resize the image
to fit the div container.
</p>
<div class="container">
<img src="/https/www.tutorialspoint.com/html/images/test.png">
</div>
</body>
</html>
Using object-fit: contain Property
In this approach to auto-resize an image to fit the div container using CSS, we have used the CSS object-fit property.
- We have used an img tag to insert an image in our HTML document. Then we have placed this image inside the div container.
- Then we have fixed the height, width of the container and added a border of the container.
- Then we have set the height and width of the image to 100%. Using object-fit: contain; we ensure that the image is auto-resized to fit the div container without distorting the image.
- In this approach, white spaces appear if width ad height of the image do not match with container.
Example
Here is a complete example code implementing above mentioned steps to auto-resize an image to fit the div container using CSS object-fit: contain property.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Auto Resize Image</title>
<style>
.container {
width: 300px;
height: 90px;
border: 1px solid black;
}
img {
width: 100%;
height: 100%;
object-fit: contain;
}
</style>
</head>
<body>
<h3>
Auto resizing an Image to Fit a div Container using CSS
</h3>
<p>
In this approach we have used CSS <strong>contain</strong>
value of <strong>object-fit</strong> property to auto
resize the image to fit the div container.
</p>
<div class="container">
<img src="/https/www.tutorialspoint.com/html/images/test.png">
</div>
</body>
</html>
Using max-width Property
In this approach we have used the CSS max-width and height property to auto-resize an image to fit the div container.
- We have used an img tag to insert an image in our HTML document. Then we have placed this image inside the div container.
- Then we have fixed the width of the container and added a border of the container.
- The max-width is set to 100% to fully expand to cover the container's width.
- The height property is set to auto to adjusts the height of the image according to height of the container.
Example
Here is a complete example code implementing above mentioned steps to auto-resize an image to fit the div container using CSS max-width property.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Auto Resize Image</title>
<style>
.container {
width: 300px;
border: 1px solid green;
}
img {
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<h3>
Auto resizing an Image to Fit a div Container using CSS
</h3>
<p>
In this approach we have used CSS <strong>max-width
</strong> property to auto resize the image
to fit the div container.
</p>
<div class="container">
<img src="/https/www.tutorialspoint.com/html/images/test.png">
</div>
</body>
</html>
Conclusion
In this article, we have covered five different approaches to auto-resize an image to fit the div container using CSS. These approaches are: by using object-fit: cover, using grid, using aspect-ratio, using object-fit: contain and by using max-width property. Out of all the approaches any approaches can be used to do this task.
3K+ Views
