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 an or should be resized to fit its container with CSS?
The CSS object-fit property is used to resize an image to fit its container while maintaining control over how the image is scaled and positioned. This property is essential for creating responsive layouts where images need to adapt to different container sizes without distorting their appearance.
Syntax
selector {
object-fit: value;
}
Possible Values
| Value | Description |
|---|---|
fill |
Stretches the image to fill the container (may distort aspect ratio) |
contain |
Scales image to fit inside container while maintaining aspect ratio |
cover |
Scales image to cover entire container while maintaining aspect ratio |
scale-down |
Acts as either contain or none, whichever results in smaller size |
none |
Image keeps its natural size |
Example: Using object-fit: fill
The fill value stretches the image to completely fill the container dimensions −
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
background-color: #f0f0f0;
}
.container {
width: 400px;
height: 200px;
border: 2px solid #333;
margin: 20px auto;
}
.fill-image {
width: 100%;
height: 100%;
object-fit: fill;
}
</style>
</head>
<body>
<h2>Object-fit: fill</h2>
<div class="container">
<img class="fill-image" src="/css/images/logo.png" alt="Logo">
</div>
</body>
</html>
An image stretched to fill the entire 400x200px container, potentially distorting the original aspect ratio.
Example: Using object-fit: contain
The contain value scales the image to fit inside the container while preserving aspect ratio −
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
background-color: #f8f8f8;
}
.container {
width: 300px;
height: 300px;
border: 2px solid #666;
margin: 20px auto;
background-color: white;
}
.contain-image {
width: 100%;
height: 100%;
object-fit: contain;
}
</style>
</head>
<body>
<h2>Object-fit: contain</h2>
<div class="container">
<img class="contain-image" src="/css/images/logo.png" alt="Logo">
</div>
</body>
</html>
An image scaled to fit entirely within the 300x300px container while maintaining its original proportions, with possible white space around the image.
Example: Using object-fit: cover
The cover value scales the image to cover the entire container while maintaining aspect ratio −
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
background-color: #e8e8e8;
}
.container {
width: 250px;
height: 150px;
border: 2px solid #444;
margin: 20px auto;
overflow: hidden;
}
.cover-image {
width: 100%;
height: 100%;
object-fit: cover;
}
</style>
</head>
<body>
<h2>Object-fit: cover</h2>
<div class="container">
<img class="cover-image" src="/css/images/logo.png" alt="Logo">
</div>
</body>
</html>
An image scaled to completely cover the 250x150px container while maintaining proportions, with parts of the image potentially cropped if necessary.
Conclusion
The object-fit property provides flexible control over how images resize within their containers. Use contain to ensure the entire image is visible, cover to fill the container completely, or fill when exact container dimensions are required regardless of distortion.
375 Views
