CSS Object-Fit
Control how images fit within their containers
📐 What is CSS Object-Fit?
The object-fit property controls how an image or video should be resized to fit its container. It's like background-size for replaced elements, helping you maintain aspect ratios and control cropping behavior.
/* Make image cover the entire container */
img {
width: 300px;
height: 200px;
object-fit: cover;
}
Object-Fit Values
Fill
Stretch to fill container
img {
object-fit: fill;
}Contain
Fit entire image in container
img {
object-fit: contain;
}Cover
Fill container, maintain ratio
img {
object-fit: cover;
}Scale-Down
Smaller of contain or none
img {
object-fit: scale-down;
}🔹 Object-Fit: Fill
The object-fit: fill property stretches images to completely fill their containers, potentially distorting aspect ratios. This CSS property forces the replaced content (typically images or videos) to expand or compress to match the container dimensions exactly. While this ensures no empty space remains in the container, it may create unnatural stretching or compression that distorts visual content. Use cases include abstract background patterns where exact dimensions matter more than preserving proportions, or when intentionally creating distorted artistic effects. For most photographic content, other object-fit values like contain or cover are preferable as they maintain aspect ratio integrity while fitting within container boundaries.
/* Fill - stretches image to fill container */
.fill-example {
width: 200px;
height: 150px;
object-fit: fill;
border: 2px solid #007cba;
}
/* Container for comparison */
.container-demo {
display: inline-block;
margin: 10px;
text-align: center;
}<div class="container-demo">
<img src="/placeholder.png"
alt="Fill Example"
class="fill-example">
<p>object-fit: fill</p>
</div>Output:
object-fit: fill
🔹 Object-Fit: Contain
Object-fit: contain scales images to fit entirely within containers while preserving original aspect ratios. This property ensures all image content remains visible, potentially leaving empty space (letterboxing or pillarboxing) when container proportions don't match the image proportions. The image scales down proportionally until it fits completely within the bounding container. This approach is ideal for product galleries, logos, and instructional images where complete visibility matters more than exact filling. Combined with background-color or background-image on the container, the empty spaces can be styled to complement the design. This property is particularly valuable for responsive designs where container dimensions vary but image integrity must be preserved.
/* Contain - fits entire image inside container */
.contain-example {
width: 200px;
height: 150px;
object-fit: contain;
border: 2px solid #28a745;
background-color: #f8f9fa; /* Shows empty space */
}<div style="display: flex; gap: 20px; justify-content: center;">
<div class="container-demo">
<img src="/placeholder.png"
alt="Contain Tall"
class="contain-example">
<p>Tall image - contain</p>
</div>
<div class="container-demo">
<img src="/placeholder.png"
alt="Contain Wide"
class="contain-example">
<p>Wide image - contain</p>
</div>
</div>Output:
Tall image - contain
Wide image - contain
🔹 Object-Fit: Cover (Most Popular)
Object-fit: cover scales images to completely cover containers while maintaining aspect ratios, often cropping portions. As the most popular object-fit value, cover ensures containers are completely filled with image content without distortion, though edges may be cropped when proportions don't match. This technique is essential for hero sections, profile pictures, and card images where consistent sizing and complete coverage are priorities. Combined with object-position, developers control which parts of images remain visible after cropping. The popularity stems from its ability to create visually consistent layouts regardless of original image dimensions, making it invaluable for user-generated content platforms and responsive designs requiring uniform visual presentation.
/* Cover - fills container, maintains aspect ratio */
.cover-example {
width: 200px;
height: 150px;
object-fit: cover;
border: 2px solid #dc3545;
}
/* Perfect for card layouts */
.card-image {
width: 100%;
height: 200px;
object-fit: cover;
border-radius: 8px 8px 0 0;
}
.card {
width: 250px;
border: 1px solid #ddd;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}<div style="display: flex; gap: 20px; align-items: start;">
<div class="container-demo">
<img src="/placeholder.svg?height=300&width=400"
alt="Cover Example"
class="cover-example">
<p>object-fit: cover</p>
</div>
<div class="card">
<img src="/placeholder.svg?height=300&width=400"
alt="Card Image"
class="card-image">
<div style="padding: 15px;">
<h3>Card Title</h3>
<p>Perfect cover fit!</p>
</div>
</div>
</div>Output:
object-fit: cover
🔹 Object-Position Property
The object-position property controls which part of an image remains visible when using object-fit: cover or contain. This CSS property accepts keyword values (top, right, bottom, left, center) or precise coordinates (50% 25%) to specify the alignment of content within its container. When combined with object-fit: cover, object-position determines which portion of the image gets cropped or emphasized. For example, object-position: top ensures the top portion of portrait images remains visible in landscape containers, ideal for headshots. This precise control is crucial for maintaining visual focus on important image regions while accommodating varying container proportions across responsive layouts.
/* Control positioning with object-position */
.position-top {
object-fit: cover;
object-position: top;
}
.position-center {
object-fit: cover;
object-position: center;
}
.position-bottom {
object-fit: cover;
object-position: bottom;
}
.position-custom {
object-fit: cover;
object-position: 25% 75%; /* x% y% */
}
/* Common container styling */
.position-demo {
width: 150px;
height: 100px;
border: 2px solid #6f42c1;
}<div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; text-align: center;">
<div>
<img src="/placeholder.png"
alt="Top Position"
class="position-demo position-top">
<p>object-position: top</p>
</div>
<div>
<img src="/placeholder.png"
alt="Center Position"
class="position-demo position-center">
<p>object-position: center</p>
</div>
<div>
<img src="/placeholder.png"
alt="Bottom Position"
class="position-demo position-bottom">
<p>object-position: bottom</p>
</div>
</div>Output:
object-position: top
object-position: center
object-position: bottom
🔹 Practical Examples
Real-world use cases for object-fit:
/* Profile picture gallery */
.profile-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
gap: 10px;
}
.profile-pic {
width: 80px;
height: 80px;
border-radius: 50%;
object-fit: cover;
border: 3px solid #fff;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
/* Hero banner */
.hero-banner {
width: 100%;
height: 200px;
object-fit: cover;
object-position: center;
}
/* Product thumbnail */
.product-thumb {
width: 120px;
height: 120px;
object-fit: contain;
background-color: #f8f9fa;
border: 1px solid #dee2e6;
border-radius: 4px;
}<div style="max-width: 500px;">
<!-- Hero Banner -->
<img src="/placeholder.svg?height=400&width=800"
alt="Hero Banner"
class="hero-banner">
<!-- Profile Gallery -->
<div class="profile-grid" style="margin: 20px 0;">
<img src="/placeholder.png"
alt="Profile 1"
class="profile-pic">
<img src="/placeholder.png"
alt="Profile 2"
class="profile-pic">
<img src="/placeholder.png"
alt="Profile 3"
class="profile-pic">
<img src="/placeholder.png"
alt="Profile 4"
class="profile-pic">
</div>
</div>Output: