css object-fit

CSS Object-Fit — Control Image and Video Sizing

by

Ever struggled with images or videos stretching, squishing, or overflowing their containers? The CSS object-fit property solves this problem by controlling how media fills its box. Whether you want to cover, contain, or maintain aspect ratio, object-fit makes your designs look clean and professional. In this MiniCoursey quick guide, you’ll learn what object-fit does, common use cases, and best practices for responsive, polished layouts.

What is Object-Fit?

The object-fit property defines how an image or video should be resized to fit its container. This is especially useful when working with dynamic content or responsive designs.

Popular Object-Fit Values

  • fill — Default. Stretches the content to fill the box, even if it distorts.
  • contain — Keeps aspect ratio, fits entire content inside the box.
  • cover — Fills the box while maintaining aspect ratio, cropping if needed.
  • none — Keeps original size, content may overflow.
  • scale-down — Same as none or contain, whichever is smaller.

img {
  width: 100%;
  height: 300px;
  object-fit: cover;
}

In this example, the image fills the container while cropping parts that don’t fit — perfect for hero images or cards.

Combine with Aspect-Ratio

Pair object-fit with aspect-ratio for images and videos that always look great and keep their shape.


img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

💡 Pro Tip: Use object-position to adjust which part of the media stays visible when cropping.

⚠️ Common Mistake: Remember, object-fit only works on replaced elements like <img> or <video> — not on <div>s.

FAQ

Q: Does object-fit affect background images?
A: No — use background-size for background images instead.

Q: Is object-fit supported everywhere?
A: Yes! It’s well-supported in all modern browsers.

Related Link

👉 Check out previous: CSS Aspect-Ratio — Control Element Dimensions

Where to Learn More

Experiment with different object-fit values for cards, galleries, or hero sections. MDN’s Object-Fit docs are a great resource with live examples.

Conclusion

Congrats — you now know how to control how images and videos fill containers with object-fit! Use it for clean, flexible designs that adapt to any screen.

✨ Bookmark MiniCoursey for more quick & free mini courses!

Leave a Comment