CSS Object Fit

Imagine framing a photo. If the frame is a different shape than the photo, you either stretch the picture until it looks distorted, or you crop it to fit neatly inside the frame. object-fit tells the browser exactly how to handle that mismatch for images and videos sitting inside a fixed size box. It can stretch, crop, shrink, or letterbox the content instead of leaving you with a squashed photo. object-position works alongside it, letting you choose which part of the image stays visible when cropping happens, similar to sliding the photo around inside the frame before trimming the edges.

In this page:

The fill Value
The contain Value
The cover Value
The none and scale-down Values
Controlling the Focal Point With object-position

The fill Value

fill is the default behavior for replaced elements without object-fit, it stretches the media to completely fill the box, ignoring the original aspect ratio. This default behavior is rarely what you want for photos, since distortion is usually visually jarring.

Note: Avoid fill for photographs, it distorts faces and straight lines, reserve it for graphics that tolerate stretching.

Warning: fill can make images look warped if the box's aspect ratio does not match the source media's aspect ratio.

Example: The fill Value

css

<style>
img {
  width: 200px;
  height: 100px;
  object-fit: fill;
}
</style>
<img src="https://placehold.co/400x400" alt="Stretched, ignoring the original aspect ratio">

The contain Value

contain shrinks or grows the media so the entire thing fits inside the box while keeping its aspect ratio, leaving empty space on the shorter axis. This value is ideal when you need to guarantee the entire image is visible, even if that means visible empty space around it.

Note: Pair contain with a background-color on the box so the empty letterbox space blends into the design instead of showing raw white.

Warning: contain never crops, so if the box is much wider or taller than the media, a lot of visible empty space can appear.

Example: The contain Value

css

<style>
img {
  width: 200px;
  height: 100px;
  object-fit: contain;
  background: #eee;
}
</style>
<img src="https://placehold.co/400x400" alt="Entire image visible, empty space on the shorter axis">

The cover Value

cover scales the media up until it completely fills the box, cropping any overflow, this is the most common choice for hero images and avatars. Because part of the image is cropped away, cover works best when the subject is centered or when object-position is adjusted to compensate.

Note: cover is ideal for responsive hero banners because it always fills the space with no gaps regardless of screen size.

Warning: cover can crop out important subject matter near the edges, combine it with object-position to keep the focal point visible.

Example: The cover Value

css

<style>
img {
  width: 200px;
  height: 100px;
  object-fit: cover;
}
</style>
<img src="https://placehold.co/400x400" alt="Fills the box, cropping any overflow">

The none and scale-down Values

none ignores the box entirely and shows the media at its natural size, possibly overflowing or leaving gaps, while scale-down picks whichever of none or contain results in a smaller size.

Note: Use scale-down when you want large images shrunk to fit but small images left at their natural size instead of being stretched up.

Warning: none can cause an image to overflow its container and spill into surrounding layout if the source is larger than the box.

Example: The none and scale-down Values

css

<style>
.none {
  width: 100px;
  height: 100px;
  object-fit: none;
}
.scale-down {
  width: 100px;
  height: 100px;
  object-fit: scale-down;
}
</style>
<img class="none" src="https://placehold.co/300x300" alt="Natural size, may overflow">
<img class="scale-down" src="https://placehold.co/300x300" alt="Shrunk to fit like contain">

Controlling the Focal Point With object-position

object-position sets which part of the media stays anchored and visible when object-fit crops or leaves empty space, accepting keywords or precise percentage and length values. Without adjusting this, a subject positioned off-center in the original photo might get cropped out entirely by object-fit: cover.

Note: Use object-position: top when photographing people, since faces are usually near the top of a portrait photo.

Warning: object-position only has a visible effect when combined with object-fit values that crop or leave space, such as cover, contain, or none.

Example: Controlling the Focal Point With object-position

css

<style>
img {
  width: 200px;
  height: 100px;
  object-fit: cover;
  object-position: top;
}
</style>
<img src="https://placehold.co/400x400" alt="Keeps the top of the photo visible when cropped">

Common Mistakes

Forgetting that object-fit requires the image or video to have an explicit width and height, without them there is no box to fit into.
Using object-fit: cover expecting the whole image to remain visible, cover crops overflowing edges by design.
Confusing object-fit with background-size, object-fit only applies to replaced elements like img and video, not background images.

Chapter Summary

object-fit controls how an image or video is resized to fit its box: fill, contain, cover, none, or scale-down.
cover crops to fill the box completely, while contain shrinks the whole media to fit without cropping.
object-position chooses which part of the media stays visible when cropping occurs, working like background-position.

Browser Support

object-fit and object-position are supported by all modern browsers, with a known limitation on older versions of Edge that ignored object-fit on video elements.

🔒

Chapter Quiz — Complete all 25 topics to unlock

0/25 topics done

Complete these topics first:

← Previous Lesson CSS Aspect Ratio Next Lesson → CSS object-position