The object-fit CSS property controls how images or videos scale within their container. 1. fill stretches media to fit, possibly distorting it. 2. contain scales media to fit entirely within the container while preserving aspect ratio. 3. cover scales media to cover the entire container, cropping edges as needed. 4. none leaves media at its original size without scaling. 5. scale-down behaves like none or contain, whichever results in the smaller display size. It is especially useful for responsive layouts and UI components such as cards, sliders, and banners, where maintaining visual consistency is key. However, object-fit does not apply to background images and may not be supported in older browsers like Internet Explorer. Pairing it with object-position allows control over the focal point when cropping.

When you're working with images or videos in CSS and they don’t match the size or aspect ratio of their container, object-fit helps control how they scale or fit inside that space. It’s especially useful when you want to maintain layout consistency without distorting the media.

What Does object-fit Do Exactly?

In short, object-fit tells the browser how an image or video should adjust itself to fit its container. Think of it like picture framing — you can stretch the photo, center it, crop the edges, etc., depending on what look you're going for.

There are five main values:

• fill: Stretches the image/video to fill the container (can distort)
• contain: Scales the media so the whole thing fits, keeping aspect ratio
• cover: Crops the edges to fully cover the container while preserving ratio
• none: Shows the original size, no scaling
• scale-down: Behaves like none or contain, whichever gives a smaller size

This property works best when you’ve already set explicit width and height on the element.

How to Use object-fit in Practice

Let’s say you have a fixed-size card layout where all images need to fit nicely without breaking the design. Here’s how different values might apply:

• For a profile picture that must stay centered and uncropped:
  object-fit: cover; combined with object-position: center;

• For a thumbnail grid, where all images should show full content:
  object-fit: contain; ensures nothing gets cut off

• If you're designing a banner and stretching is acceptable:
  object-fit: fill; will make the image fill the area completely

You’ll typically write this in your CSS like:

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

Just keep in mind: object-fit doesn't work on inline elements unless they’re block-level or replaced elements like <img alt="What is the CSS object-fit property for images and videos?" > or <video></video>.

When Should You Use It?

One common use case is responsive design — especially when dealing with user-uploaded images of varying sizes. Without object-fit, you might end up with awkward white space or distorted visuals.

Another scenario is when building UI components like:

• Image sliders/carousels
• Product cards with uniform sizing
• Video backgrounds that adapt to screen size

If you're using a framework like Bootstrap or Tailwind, some utilities may abstract this away, but knowing how object-fit behaves lets you tweak things precisely when needed.

Also, if you notice that an image looks squashed or stretched unexpectedly, check whether object-fit is applied — and which value is in use.

A Few Gotchas and Tips

• object-fit doesn't affect background images — use background-size instead.
• In older browsers like IE, support isn’t great, so consider fallbacks if needed.
• Always pair with object-position if you want to adjust where the focal point is when cropping.

Here's a quick reference list:

• ? Use cover for consistent fills with cropping
• ? Use contain to avoid cropping at all costs
• ? Don’t expect it to work on background images
• ?? Watch out for distortion with fill

That’s basically it — a straightforward tool once you understand how each value behaves. It won’t fix bad image choices, but it definitely helps manage them better within your layout.

The above is the detailed content of What is the CSS object-fit property for images and videos?. For more information, please follow other related articles on the PHP Chinese website!