Control how images fill containers with object-fit (cover, contain, fill)
Position images within containers using object-position
Maintain aspect ratios with the modern aspect-ratio property
Create responsive image foundations with max-width: 100%
Apply object-fit patterns for hero images, cards, avatars, and galleries
Understand when to use HTML solutions (srcset, picture) vs CSS solutions
Build production-ready responsive image patterns
Introduction to Responsive Images
Responsive images adapt to different screen sizes, device capabilities, and layout contexts. While HTML provides tools like srcset and picture for serving different image files, CSS provides powerful properties for controlling how images display within their containers. The modern CSS approach using object-fit, object-position, and aspect-ratio creates flexible, maintainable image layouts without JavaScript.
These CSS properties solve common problems: preventing image distortion, maintaining consistent dimensions across varying content, cropping images intelligently, and ensuring images look good at any size. Combined with HTML's responsive image features, CSS creates a complete solution for modern image handling.
object-fit - How Images Fill Containers
The object-fit property controls how replaced content (images, videos) resizes to fit its container. This solves the common problem of images distorting when forced into specific dimensions.
When using object-fit: cover or object-fit: none, the image may be cropped. The object-position property controls which part of the image remains visible.
/* Named positions */
img {
object-fit: cover;
object-position: top;
/* Values: top, bottom, left, right, center */
}
/* Percentage values (x y) */
img {
object-position: 75% 25%;
/* 75% from left, 25% from top */
}
/* Pixel values */
img {
object-position: 20px 30px;
}
/* Combinations */
img {
object-position: center bottom;
object-position: right 10px top 20px;
}
/* Focus on faces in portraits */
.portrait {
object-fit: cover;
object-position: center 30%;
}
aspect-ratio - Modern Layout Control
The aspect-ratio property maintains an element's width-to-height ratio, preventing layout shift and eliminating the need for padding-bottom hacks.
/* Video aspect ratio */
.video-container {
width: 100%;
aspect-ratio: 16 / 9;
}
/* Square images */
.thumbnail {
width: 200px;
aspect-ratio: 1; /* Same as 1 / 1 */
}
/* Photo aspect ratio */
.photo {
aspect-ratio: 4 / 3;
}
/* Golden ratio */
.hero {
aspect-ratio: 1.618;
}
/* Combined with object-fit */
img {
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
}
Responsive Image Foundation
Start with this foundation to make all images responsive by default. These rules prevent images from exceeding their container width while maintaining their aspect ratio.
Hero images need to fill a specific height while cropping intelligently. This pattern is perfect for large header images that need to work across all viewport sizes.
.hero-img {
width: 100%;
height: 400px;
object-fit: cover;
object-position: center;
}
/* Responsive height */
@media (max-width: 768px) {
.hero-img {
height: 250px;
}
}
/* Focus on specific area */
.hero-portrait {
object-position: center 30%;
}
Card Image Pattern
Card images need consistent heights regardless of the source image's aspect ratio. This pattern ensures a uniform grid of cards with perfectly sized images.
While this tutorial focuses on CSS, the HTML picture element works hand-in-hand with CSS for complete responsive image solutions. Use it for art direction and format selection.
<!-- Art Direction: different images for different sizes -->
<picture>
<source media="(min-width: 1024px)" srcset="hero-desktop.jpg">
<source media="(min-width: 768px)" srcset="hero-tablet.jpg">
<img src="hero-mobile.jpg" alt="Hero image"
style="width: 100%; object-fit: cover;">
</picture>
<!-- Format Selection: modern formats with fallback -->
<picture>
<source srcset="image.avif" type="image/avif">
<source srcset="image.webp" type="image/webp">
<img src="image.jpg" alt="Description">
</picture>
<!-- Resolution Switching: different sizes -->
<img srcset="small.jpg 480w,
medium.jpg 800w,
large.jpg 1200w"
sizes="(max-width: 600px) 480px,
(max-width: 900px) 800px,
1200px"
src="medium.jpg" alt="Description">
Complete Responsive Image Patterns
Here are production-ready patterns combining all techniques for common responsive image needs.
Foundation (All Images)
/* Apply to all images */
img {
max-width: 100%;
height: auto;
display: block;
}