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
CSS object-fit Property Values
The CSS object-fit property is used to specify how an image or video should be resized to fit its container. This property is particularly useful when you need to maintain aspect ratios or control how content fills its allocated space.
Syntax
selector {
object-fit: value;
}
Possible Values
| Value | Description |
|---|---|
fill |
Content is stretched to completely fill the container (default value) |
contain |
Content is scaled to maintain aspect ratio while fitting entirely within container |
cover |
Content is scaled to maintain aspect ratio while covering entire container (may be clipped) |
none |
Content retains its original size and may overflow the container |
scale-down |
Content is scaled down using either none or contain, whichever results in smaller size |
Example: Object-fit with Fill Value
The following example demonstrates the object-fit: fill value, which stretches the image to completely fill the container −
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
gap: 20px;
margin: 20px;
}
.image-box {
width: 200px;
height: 150px;
border: 2px solid #333;
overflow: hidden;
}
.fill-img {
width: 100%;
height: 100%;
object-fit: fill;
}
</style>
</head>
<body>
<h2>Object-fit: Fill Example</h2>
<div class="container">
<div class="image-box">
<img class="fill-img" src="https://via.placeholder.com/300x200/4CAF50/white?text=Sample+Image" alt="Sample Image">
</div>
</div>
</body>
</html>
An image stretched to fill a 200x150px container, potentially distorting the original aspect ratio to completely fill the available space.
Example: Comparing Different Object-fit Values
This example shows how different object-fit values affect the same image ?
<!DOCTYPE html>
<html>
<head>
<style>
.comparison {
display: flex;
gap: 15px;
flex-wrap: wrap;
margin: 20px;
}
.example-box {
text-align: center;
}
.demo-container {
width: 150px;
height: 100px;
border: 2px solid #666;
margin-bottom: 10px;
overflow: hidden;
}
.demo-img {
width: 100%;
height: 100%;
}
.fill { object-fit: fill; }
.contain { object-fit: contain; }
.cover { object-fit: cover; }
</style>
</head>
<body>
<h2>Object-fit Values Comparison</h2>
<div class="comparison">
<div class="example-box">
<div class="demo-container">
<img class="demo-img fill" src="https://via.placeholder.com/200x300/FF5722/white?text=Fill" alt="Fill example">
</div>
<p><strong>fill</strong></p>
</div>
<div class="example-box">
<div class="demo-container">
<img class="demo-img contain" src="https://via.placeholder.com/200x300/2196F3/white?text=Contain" alt="Contain example">
</div>
<p><strong>contain</strong></p>
</div>
<div class="example-box">
<div class="demo-container">
<img class="demo-img cover" src="https://via.placeholder.com/200x300/4CAF50/white?text=Cover" alt="Cover example">
</div>
<p><strong>cover</strong></p>
</div>
</div>
</body>
</html>
Three side-by-side containers showing the same image with different object-fit values: - fill: Image stretched to fill container completely - contain: Image scaled to fit entirely within container with preserved aspect ratio - cover: Image scaled to cover entire container while maintaining aspect ratio (may be cropped)
Conclusion
The object-fit property provides precise control over how images and videos are displayed within their containers. Use contain to preserve aspect ratios, cover to fill containers without distortion, or fill to stretch content to exact dimensions.
Updated on: 2026-03-15T12:53:59+05:30
184 Views
Advertisements