html
/

CSS object-fit & object-position: Image Control Mastery

Last Sync: Today

On this page

15
0%
5 min read
Remaining
5 minleft

Click any section to jump — progress syncs automatically

html

CSS object-fit & object-position: Image Control Mastery

What is object-fit?

object-fit is a CSS property that defines how an element (like <img> or <video>) should resize to fit its container. It solves the common problem of distorted images by controlling aspect ratio behavior, similar to background-size but for replaced elements.

object-fit Values

ValueBehaviorUse CaseExample
fillStretches to fill containerNot recommended (distorts)width: 100%; height: 100%;
containFits entirely inside containerProduct images, logosPreserves ratio, may have empty space
coverFills container, crops if neededHero images, thumbnailsPreserves ratio, fills completely
noneOriginal size, may overflowPixel art, exact sizingNo resizing
scale-downSmaller of none or containFallback optionShows smallest version

Basic Syntax

CSSRead-only
1
/* Cover - most common for images */
.image {
  width: 100%;
  height: 300px;
  object-fit: cover;
}

/* Contain - shows entire image */
.product-image {
  width: 200px;
  height: 200px;
  object-fit: contain;
}

/* Fill - stretches (avoid unless intentional) */
.banner {
  width: 100%;
  height: 400px;
  object-fit: fill;
}

/* None - original size, may overflow */n  .avatar {
  width: 100px;
  height: 100px;
  object-fit: none;
  object-position: center;
}

/* Scale-down - intelligently chooses smallest */
.responsive-img {
  width: 100%;
  height: auto;
  object-fit: scale-down;
}

Visual Comparison

HTMLRead-only
1
<!-- All images have same container: 300x200px -->
<div class="container">
  <!-- Original image: 600x400px (landscape) -->
  
  <!-- fill - stretched/distorted -->
  <img src="image.jpg" style="object-fit: fill;">
  
  <!-- contain - whole image visible, letterboxed -->
  <img src="image.jpg" style="object-fit: contain;">
  
  <!-- cover - fills container, crops edges -->
  <img src="image.jpg" style="object-fit: cover;">
  
  <!-- none - original size, may overflow -->
  <img src="image.jpg" style="object-fit: none;">
</div>

object-position: Positioning the Content

CSSRead-only
1
/* Default position: center */
.image {
  object-fit: cover;
  object-position: center; /* default */
}

/* Custom positioning (similar to background-position) */
.image {
  object-fit: cover;
  object-position: top left;
}

/* Pixel values */
.image {
  object-fit: cover;
  object-position: 20px 10px;
}

/* Percentage values */
.image {
  object-fit: cover;
  object-position: 25% 75%;
}

/* Edge keywords */
.image {
  object-position: right top;
  object-position: left bottom;
  object-position: center right;
}

/* Combined values */
.image {
  object-position: 10% 20px;
  object-position: right 10px top 20px;
}

Practical Examples

CSSRead-only
1
/* 1. Responsive Hero Image */
.hero {
  width: 100%;
  height: 60vh;
  overflow: hidden;
}

.hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%; /* Focus on specific area */
}

/* 2. Product Gallery (uniform thumbnails) */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
}

.product-card img {
  width: 100%;
  height: 200px;
  object-fit: contain;
  background: #f5f5f5;
}

/* 3. Avatar / Profile Pictures */
.avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* 4. Card Images */
.card {
  width: 300px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.card:hover img {
  transform: scale(1.05);
}

/* 5. Logo Container (different aspect ratios) */
.logo-container {
  width: 150px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo-container img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* 6. Background-style image (alternative to background-image) */
.bg-image {
  position: relative;
  height: 400px;
  overflow: hidden;
}

.bg-image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}

Advanced object-position Techniques

CSSRead-only
1
/* Focus on specific face in group photo */
.team-photo {
  width: 100%;
  height: 300px;
  object-fit: cover;
  object-position: 65% 40%;
}

/* Responsive object-position */
@media (max-width: 768px) {
  .hero img {
    object-position: 70% center; /* Different focus on mobile */
  }
}

/* Animated object-position */
.slideshow img {
  object-fit: cover;
  object-position: 0% center;
  transition: object-position 1s ease;
}

.slideshow img:hover {
  object-position: 100% center;
}

/* Using CSS variables */
:root {
  --focus-x: 50%;
  --focus-y: 50%;
}

.dynamic-image {
  object-fit: cover;
  object-position: var(--focus-x) var(--focus-y);
}

/* With JavaScript control */
/* Can update variables dynamically based on user interaction */

object-fit for Videos

CSSRead-only
1
/* Video background */
.video-background {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.video-background video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}

/* Responsive video container */
.video-container {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}

.video-container video {
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* Thumbnail preview */
.video-thumbnail {
  width: 320px;
  height: 180px; /* 16:9 aspect ratio */
  object-fit: cover;
  cursor: pointer;
}

Browser Support & Fallbacks

CSSRead-only
1
/* Feature detection */
@supports (object-fit: cover) {
  .image {
    object-fit: cover;
  }
}

/* Fallback for older browsers */
.image-container {
  width: 300px;
  height: 200px;
  overflow: hidden;
  position: relative;
}

.image-container img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 100%;
  min-height: 100%;
  max-width: none;
}

/* Modern approach with object-fit */
.image {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

/* Using background-image as fallback */
.image-fallback {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.image-fallback img {
  opacity: 0; /* Hide img, show background */
}

Common Use Cases

CSSRead-only
1
/* 1. Social Media Feed (uniform post images) */
.post-image {
  width: 100%;
  height: 400px;
  object-fit: cover;
}

/* 2. E-commerce Product Grid */
.product-image {
  width: 100%;
  height: 250px;
  object-fit: contain;
  background: white;
  padding: 20px;
}

/* 3. User Gallery */
.gallery-item {
  aspect-ratio: 1 / 1; /* Square */
  overflow: hidden;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}

.gallery-item:hover img {
  transform: scale(1.1);
}

/* 4. Before/After Images */
.comparison {
  display: flex;
  gap: 20px;
}

.comparison img {
  width: 50%;
  height: 300px;
  object-fit: cover;
  object-position: center;
}

/* 5. Mood Board / Pinterest Style */
.masonry-grid img {
  width: 100%;
  height: auto;
  object-fit: cover;
  margin-bottom: 20px;
  border-radius: 8px;
}

/* 6. Email Signature Logo */
.signature-logo {
  width: 120px;
  height: 40px;
  object-fit: contain;
  object-position: left center;
}

Aspect Ratio Integration

CSSRead-only
1
/* Modern approach: combining aspect-ratio with object-fit */
.responsive-media {
  aspect-ratio: 16 / 9;
  width: 100%;
}

.responsive-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Different aspect ratios for different devices */
.hero-image {
  aspect-ratio: 16 / 9;
  width: 100%;
}

@media (min-width: 768px) {
  .hero-image {
    aspect-ratio: 21 / 9;
  }
}

/* Fixed aspect ratio grid */
.grid-square {
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.grid-square img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Portrait orientation */
.portrait-container {
  aspect-ratio: 3 / 4;
}

/* Landscape orientation */
.landscape-container {
  aspect-ratio: 4 / 3;
}

Performance Considerations

  • Use appropriate image sizes – object-fit doesn't reduce file size, serve properly sized images
  • Combine with srcset – Responsive images + object-fit = perfect combination
  • Avoid object-fit on animated GIFs – Can cause performance issues
  • Use will-change sparingly – Only for frequently animated images
  • Hardware acceleration – object-fit is GPU accelerated in modern browsers
  • Lazy loading – Combine with loading="lazy" for off-screen images

Best Practices

  • Use cover for hero images – Ensures full bleed with no empty space
  • Use contain for product photos – Shows entire product without cropping
  • Set explicit width/height – Prevents layout shift (CLS)
  • Add background color – For contain or scale-down, shows during loading
  • Combine with border-radius – Works perfectly for rounded corners
  • Test different aspect ratios – Ensure important content isn't cropped
  • Use object-position strategically – Focus on the most important part
  • Provide fallbacks – For older browsers (IE doesn't support object-fit)

Common Mistakes

  • Forgetting to set height – object-fit needs explicit dimensions
  • Using fill by default – Distorts images, use cover or contain instead
  • Not setting object-position – Important parts may be cropped
  • Assuming all images have same ratio – Test with portrait and landscape
  • Over-optimizing quality – object-fit doesn't affect image quality, just display
  • Not providing alt text – Accessibility always matters

Conclusion

object-fit and object-position are essential tools for modern responsive design. They give you precise control over how images and videos behave within their containers, solving common layout issues with minimal CSS. Use cover for full-bleed images, contain for product displays, and object-position to focus on important content. With excellent browser support (except IE), these properties should be part of every frontend developer's toolkit.

Try it yourself

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 800px;
  margin: 0 auto;
  font-family: system-ui;
}

.gallery-item {
  background: #f0f0f0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.gallery-item img {
  width: 100%;
  height: 200px;
  /* Try different values: cover, contain, fill, none, scale-down */
  object-fit: cover;
  /* Try different positions: center, top, bottom, 30% 70%, etc */
  object-position: center;
  transition: transform 0.3s ease;
}

.gallery-item:hover img {
  transform: scale(1.05);
}

.gallery-item p {
  padding: 12px;
  margin: 0;
  text-align: center;
  font-size: 14px;
  color: #666;
}

h2 {
  text-align: center;
  font-family: system-ui;
  margin-bottom: 20px;
}

/* Try different aspect ratios and image sizes */
/* The images will maintain their original aspect ratios */
/* Notice how object-fit controls their behavior in the 200px height container */

Test Your Knowledge

Q1
of 5

Which object-fit value maintains aspect ratio and fills container completely?

A
fill
B
contain
C
cover
D
none
Q2
of 5

Which object-fit value may show empty space (letterboxing)?

A
fill
B
contain
C
cover
D
scale-down
Q3
of 5

Which property controls where the image is positioned within the container?

A
object-fit
B
object-align
C
object-position
D
image-position
Q4
of 5

What's required for object-fit to work properly?

A
Explicit width only
B
Explicit height only
C
Both width and height set
D
Aspect ratio only
Q5
of 5

Which value stretches the image ignoring aspect ratio?

A
cover
B
contain
C
fill
D
stretch

Frequently Asked Questions

What's the difference between object-fit and background-size?

object-fit works on replaced elements (img, video). background-size works on background images. Use object-fit for content images, background-size for decorative images.

Does object-fit work on all HTML elements?

It works on replaced elements: <img>, <video>, <canvas>, <svg>, <iframe>, and <embed>. It doesn't work on divs or other container elements.

Can I animate object-fit?

No, object-fit cannot be animated. But you can animate object-position or use transforms on the container.

What's the default value of object-fit?

fill - which is why images stretch by default when you set both width and height.

Does object-fit work in Internet Explorer?

No, IE doesn't support object-fit. Use polyfills or fallback techniques like background-image with background-size: cover.

Previous

css calc

Next

css aspect ratio

Related Content

Need help?

Explore our comprehensive docs or start a chat with our tech experts.