Control how images and videos fit their containers. Here's how to use these properties.
object-fit Values#
1/* Fill - stretches to fill (default) */
2.fill {
3 object-fit: fill;
4 width: 300px;
5 height: 200px;
6}
7
8/* Contain - fits inside, maintains ratio */
9.contain {
10 object-fit: contain;
11 width: 300px;
12 height: 200px;
13}
14
15/* Cover - fills and clips, maintains ratio */
16.cover {
17 object-fit: cover;
18 width: 300px;
19 height: 200px;
20}
21
22/* None - original size, clips if larger */
23.none {
24 object-fit: none;
25 width: 300px;
26 height: 200px;
27}
28
29/* Scale-down - smaller of none or contain */
30.scale-down {
31 object-fit: scale-down;
32 width: 300px;
33 height: 200px;
34}Common Use Cases#
1/* Responsive hero image */
2.hero-image {
3 width: 100%;
4 height: 60vh;
5 object-fit: cover;
6}
7
8/* Avatar */
9.avatar {
10 width: 50px;
11 height: 50px;
12 border-radius: 50%;
13 object-fit: cover;
14}
15
16/* Thumbnail grid */
17.thumbnail {
18 width: 100%;
19 aspect-ratio: 1;
20 object-fit: cover;
21}
22
23/* Product image (show entire image) */
24.product-image {
25 width: 100%;
26 height: 300px;
27 object-fit: contain;
28 background-color: #f5f5f5;
29}
30
31/* Video background */
32.video-bg {
33 position: fixed;
34 width: 100%;
35 height: 100%;
36 object-fit: cover;
37 z-index: -1;
38}object-position#
1/* Position values */
2.positioned {
3 object-fit: cover;
4 width: 300px;
5 height: 200px;
6
7 /* Keywords */
8 object-position: center; /* default */
9 object-position: top;
10 object-position: bottom;
11 object-position: left;
12 object-position: right;
13 object-position: top left;
14 object-position: bottom right;
15}
16
17/* Percentage values */
18.percentage {
19 object-position: 50% 50%; /* center */
20 object-position: 0% 0%; /* top left */
21 object-position: 100% 0%; /* top right */
22 object-position: 50% 0%; /* top center */
23 object-position: 25% 75%; /* custom */
24}
25
26/* Length values */
27.length {
28 object-position: 10px 20px;
29 object-position: 1rem 2rem;
30}
31
32/* Combined */
33.combined {
34 object-position: center top;
35 object-position: 20px bottom;
36 object-position: right 10%;
37}Portrait vs Landscape#
1/* Focus on face (top center) */
2.portrait-photo {
3 object-fit: cover;
4 object-position: center top;
5}
6
7/* Landscape scenery (center) */
8.landscape-photo {
9 object-fit: cover;
10 object-position: center center;
11}
12
13/* Product on surface (bottom center) */
14.product-shot {
15 object-fit: cover;
16 object-position: center bottom;
17}
18
19/* Left-aligned subject */
20.left-subject {
21 object-fit: cover;
22 object-position: left center;
23}Card Layouts#
1/* Card with image header */
2.card {
3 border-radius: 8px;
4 overflow: hidden;
5}
6
7.card-image {
8 width: 100%;
9 height: 200px;
10 object-fit: cover;
11 object-position: center;
12}
13
14/* Horizontal card */
15.horizontal-card {
16 display: flex;
17}
18
19.horizontal-card-image {
20 width: 150px;
21 height: 100%;
22 object-fit: cover;
23 flex-shrink: 0;
24}
25
26/* Masonry-style cards */
27.masonry-card-image {
28 width: 100%;
29 object-fit: cover;
30}
31
32.masonry-card-image.portrait {
33 aspect-ratio: 2/3;
34}
35
36.masonry-card-image.landscape {
37 aspect-ratio: 3/2;
38}
39
40.masonry-card-image.square {
41 aspect-ratio: 1;
42}Gallery Layouts#
1/* Uniform gallery */
2.gallery {
3 display: grid;
4 grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
5 gap: 1rem;
6}
7
8.gallery-item {
9 aspect-ratio: 1;
10 overflow: hidden;
11}
12
13.gallery-image {
14 width: 100%;
15 height: 100%;
16 object-fit: cover;
17 transition: transform 0.3s;
18}
19
20.gallery-item:hover .gallery-image {
21 transform: scale(1.1);
22}
23
24/* Lightbox preview */
25.lightbox-image {
26 max-width: 90vw;
27 max-height: 90vh;
28 object-fit: contain;
29}
30
31/* Film strip */
32.film-strip {
33 display: flex;
34 gap: 0.5rem;
35 overflow-x: auto;
36}
37
38.film-frame {
39 flex: 0 0 150px;
40 height: 100px;
41 object-fit: cover;
42}Background Images Alternative#
1/* Before: background-image approach */
2.hero-old {
3 background-image: url('hero.jpg');
4 background-size: cover;
5 background-position: center;
6 height: 60vh;
7}
8
9/* After: img with object-fit */
10.hero-new {
11 position: relative;
12 height: 60vh;
13}
14
15.hero-new img {
16 position: absolute;
17 width: 100%;
18 height: 100%;
19 object-fit: cover;
20 object-position: center;
21}
22
23/* Benefits of img approach:
24 - Better accessibility (alt text)
25 - Lazy loading
26 - srcset support
27 - Better SEO
28*/Video Handling#
1/* Full-screen video */
2.fullscreen-video {
3 width: 100%;
4 height: 100vh;
5 object-fit: cover;
6}
7
8/* Video in container */
9.video-container {
10 aspect-ratio: 16/9;
11}
12
13.video-container video {
14 width: 100%;
15 height: 100%;
16 object-fit: cover;
17}
18
19/* Vertical video (9:16) */
20.vertical-video {
21 width: 100%;
22 max-width: 400px;
23 aspect-ratio: 9/16;
24 object-fit: cover;
25}
26
27/* Picture-in-picture style */
28.pip-video {
29 position: fixed;
30 bottom: 20px;
31 right: 20px;
32 width: 300px;
33 height: 169px;
34 object-fit: cover;
35 border-radius: 8px;
36}Responsive Adjustments#
1/* Change object-position responsively */
2.responsive-image {
3 width: 100%;
4 height: 300px;
5 object-fit: cover;
6 object-position: center center;
7}
8
9@media (max-width: 768px) {
10 .responsive-image {
11 height: 200px;
12 object-position: center top; /* Focus on face on mobile */
13 }
14}
15
16/* Change object-fit responsively */
17.adaptive-image {
18 width: 100%;
19 height: 250px;
20 object-fit: cover;
21}
22
23@media (max-width: 480px) {
24 .adaptive-image {
25 height: auto;
26 object-fit: contain;
27 }
28}With CSS Custom Properties#
1/* Dynamic positioning */
2.dynamic-image {
3 width: 100%;
4 height: 300px;
5 object-fit: cover;
6 object-position: var(--focus-x, 50%) var(--focus-y, 50%);
7}
8
9/* Usage in HTML */
10/* <img class="dynamic-image" style="--focus-x: 30%; --focus-y: 20%;" /> */
11
12/* Preset focus points */
13.focus-face {
14 --focus-x: 50%;
15 --focus-y: 25%;
16}
17
18.focus-bottom {
19 --focus-x: 50%;
20 --focus-y: 80%;
21}
22
23.focus-left {
24 --focus-x: 25%;
25 --focus-y: 50%;
26}Image Loading States#
1/* Placeholder while loading */
2.image-wrapper {
3 position: relative;
4 background-color: #f0f0f0;
5 aspect-ratio: 16/9;
6}
7
8.image-wrapper img {
9 width: 100%;
10 height: 100%;
11 object-fit: cover;
12 opacity: 0;
13 transition: opacity 0.3s;
14}
15
16.image-wrapper img.loaded {
17 opacity: 1;
18}
19
20/* Blur-up technique */
21.blur-up {
22 position: relative;
23}
24
25.blur-up .placeholder {
26 position: absolute;
27 inset: 0;
28 object-fit: cover;
29 filter: blur(20px);
30 transform: scale(1.1);
31}
32
33.blur-up .full {
34 position: relative;
35 width: 100%;
36 height: 100%;
37 object-fit: cover;
38}Fallback for Older Browsers#
1/* Fallback approach */
2.image-container {
3 position: relative;
4 overflow: hidden;
5}
6
7.image-container img {
8 /* Fallback: center the image */
9 position: absolute;
10 top: 50%;
11 left: 50%;
12 transform: translate(-50%, -50%);
13 min-width: 100%;
14 min-height: 100%;
15}
16
17/* Modern browsers */
18@supports (object-fit: cover) {
19 .image-container img {
20 position: static;
21 transform: none;
22 width: 100%;
23 height: 100%;
24 object-fit: cover;
25 }
26}Best Practices#
Usage:
✓ Use cover for hero images
✓ Use contain for product images
✓ Set explicit dimensions
✓ Consider focal points
Performance:
✓ Use appropriate image sizes
✓ Combine with lazy loading
✓ Use srcset for responsive images
✓ Optimize image files
Accessibility:
✓ Always use alt text
✓ Consider important content position
✓ Test with various image ratios
✓ Ensure text over images is readable
Avoid:
✗ Stretching images (fill with different ratios)
✗ Cutting off important content
✗ Using background-image for content images
✗ Forgetting to set dimensions
Conclusion#
object-fit and object-position provide precise control over how replaced elements like images and videos display in their containers. Use cover for cropping to fit, contain for showing the entire image, and object-position to control the focal point.