Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to Auto-Resize an 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.
Syntax
/* Basic image resizing */
img {
width: 100%;
height: 100%;
object-fit: cover | contain;
}
/* Using max-width approach */
img {
max-width: 100%;
height: auto;
}
Method 1: Using object-fit: cover Property
The CSS object-fit property with cover value scales the image to fill the container while maintaining aspect ratio. It may crop parts of the image if the aspect ratios don't match
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 300px;
height: 200px;
border: 2px solid #333;
margin: 20px 0;
}
.cover-img {
width: 100%;
height: 100%;
object-fit: cover;
}
</style>
</head>
<body>
<h3>Object-fit: cover Example</h3>
<div class="container">
<img src="/html/images/test.png" class="cover-img" alt="Test Image">
</div>
</body>
</html>
The image fills the entire container (300x200px) while maintaining its aspect ratio. Parts of the image may be cropped to fit the container dimensions.
Method 2: Using object-fit: contain Property
The contain value ensures the entire image is visible within the container. White spaces may appear if the aspect ratios don't match
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 300px;
height: 150px;
border: 2px solid #333;
margin: 20px 0;
}
.contain-img {
width: 100%;
height: 100%;
object-fit: contain;
}
</style>
</head>
<body>
<h3>Object-fit: contain Example</h3>
<div class="container">
<img src="/html/images/test.png" class="contain-img" alt="Test Image">
</div>
</body>
</html>
The entire image is visible within the container with possible white spaces on the sides or top/bottom, maintaining the original aspect ratio.
Method 3: Using max-width Property
The max-width property with height: auto creates responsive images that scale down but never exceed the container width
<!DOCTYPE html>
<html>
<head>
<style>
.responsive-container {
width: 250px;
border: 2px solid #007bff;
padding: 10px;
margin: 20px 0;
}
.responsive-img {
max-width: 100%;
height: auto;
display: block;
}
</style>
</head>
<body>
<h3>Responsive Image with max-width</h3>
<div class="responsive-container">
<img src="/html/images/test.png" class="responsive-img" alt="Test Image">
</div>
</body>
</html>
The image scales proportionally to fit within the container width while maintaining its aspect ratio. The container height adjusts to accommodate the image.
Method 4: Using CSS Grid
CSS Grid can center and fit images within containers using place-items property
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
place-items: center;
width: 280px;
height: 180px;
border: 2px solid #28a745;
margin: 20px 0;
}
.grid-img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
</style>
</head>
<body>
<h3>Grid Layout for Image Fitting</h3>
<div class="grid-container">
<img src="/html/images/test.png" class="grid-img" alt="Test Image">
</div>
</body>
</html>
The image is centered within the grid container and scales to fit while maintaining aspect ratio. The grid layout provides precise positioning control.
Comparison of Methods
| Method | Aspect Ratio | Image Cropping | Container Filling |
|---|---|---|---|
object-fit: cover |
Maintained | Possible | Complete |
object-fit: contain |
Maintained | Never | Partial (whitespace) |
max-width |
Maintained | Never | Width-based |
| CSS Grid | Maintained | Configurable | Centered |
Conclusion
Each method serves different purposes: use object-fit: cover for full container coverage, contain to show the entire image, and max-width for responsive behavior. Choose based on whether you prioritize complete container filling or preserving the entire image visibility.
3K+ Views
