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
Selected Reading
Crop Images in CSS with object-fit and object-position
CSS object-fit and object-position properties help us crop images and specify how they are displayed within their container elements. The object-fit property controls how an image is resized to fit its container, while object-position determines the alignment of the image within the container.
Syntax
selector {
object-fit: value;
object-position: value;
}
Object-fit Values
| Value | Description |
|---|---|
fill |
Stretches the image to fill the container (default) |
contain |
Scales image to fit container while maintaining aspect ratio |
cover |
Scales image to cover container while maintaining aspect ratio |
scale-down |
Behaves like contain or none, whichever results in smaller size |
none |
Image retains its natural size |
Example 1: Comparing Cover and Contain
The following example demonstrates the difference between cover and contain values −
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
gap: 20px;
margin: 20px;
}
.image-box {
width: 200px;
height: 250px;
border: 2px solid #333;
overflow: hidden;
}
.cover-img {
width: 100%;
height: 100%;
object-fit: cover;
}
.contain-img {
width: 100%;
height: 100%;
object-fit: contain;
background-color: #f0f0f0;
}
.label {
text-align: center;
font-weight: bold;
margin-top: 5px;
}
</style>
</head>
<body>
<div class="container">
<div>
<div class="image-box">
<img src="https://via.placeholder.com/300x200/4CAF50/white?text=Cover" class="cover-img" alt="Cover example">
</div>
<div class="label">object-fit: cover</div>
</div>
<div>
<div class="image-box">
<img src="https://via.placeholder.com/300x200/2196F3/white?text=Contain" class="contain-img" alt="Contain example">
</div>
<div class="label">object-fit: contain</div>
</div>
</div>
</body>
</html>
Two image containers side by side. The "cover" image fills the entire container but may be cropped. The "contain" image fits entirely within the container with possible empty space around it.
Example 2: Using Object-position
The following example shows how to use object-position to control image placement −
<!DOCTYPE html>
<html>
<head>
<style>
.position-container {
display: flex;
gap: 15px;
margin: 20px;
}
.position-box {
width: 200px;
height: 150px;
border: 2px solid #666;
overflow: hidden;
}
.position-img {
width: 100%;
height: 100%;
object-fit: cover;
}
.left-top {
object-position: left top;
}
.center-center {
object-position: center center;
}
.right-bottom {
object-position: right bottom;
}
.custom-position {
object-position: 30px 20px;
}
.position-label {
text-align: center;
font-size: 12px;
margin-top: 5px;
}
</style>
</head>
<body>
<div class="position-container">
<div>
<div class="position-box">
<img src="https://via.placeholder.com/400x300/FF5722/white?text=Image" class="position-img left-top" alt="Left top">
</div>
<div class="position-label">left top</div>
</div>
<div>
<div class="position-box">
<img src="https://via.placeholder.com/400x300/9C27B0/white?text=Image" class="position-img center-center" alt="Center center">
</div>
<div class="position-label">center center</div>
</div>
<div>
<div class="position-box">
<img src="https://via.placeholder.com/400x300/607D8B/white?text=Image" class="position-img custom-position" alt="Custom position">
</div>
<div class="position-label">30px 20px</div>
</div>
</div>
</body>
</html>
Three image containers showing different object-position values. The first image is aligned to the left-top, the second is centered, and the third is positioned at a custom 30px from left and 20px from top.
Conclusion
The object-fit and object-position properties provide powerful control over image cropping and positioning. Use cover for full container coverage with possible cropping, contain to fit the entire image, and object-position to fine-tune image alignment within its container.
Updated on: 2026-03-15T15:31:52+05:30
444 Views
Advertisements