← Back to CSS Course | Chapter 9: Modern CSS Features | Lesson 7 of 25

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:

  1. The fill Value
  2. The contain Value
  3. The cover Value
  4. The none and scale-down Values
  5. Controlling the Focal Point With object-position
Syntax
css 
selector {
  object-fit: fill | contain | cover | none | scale-down;
}

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.
  • Accepted values:
  • cover — fills the box and crops, keeps aspect ratio
  • contain — fits fully inside, keeps aspect ratio
  • fill — default, stretches to fill the box, may distort
  • none — keeps the original size
  • scale-down — smaller of none or contain
  • inherit | initial | unset | revert — CSS-wide keywords accepted by every property
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.
  • Accepted values:
  • object-fit: contain — fits inside, keeps the aspect ratio
  • object-position: center — default alignment of the letterboxing
  • background-color — visible in the empty space
  • width and height — define the box the image sits in
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.
  • Accepted values:
  • object-fit: cover — fills the box, keeps the aspect ratio, crops the overflow
  • object-position: <position> — chooses which part stays visible
  • width and height — define the box
  • note: applies to img, video and other replaced elements
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.
  • Accepted values:
  • object-fit: none — keeps the natural size, may overflow or crop
  • object-fit: scale-down — the smaller of none and contain
  • object-position — aligns the image inside the box
  • width and height — define the box
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.
  • Accepted values:
  • object-position: 50% 50% — default, centered
  • object-position: top | bottom | left | right | center — keywords
  • object-position: <length> <length> — offsets
  • object-position: <percentage> <percentage> — relative
  • inherit | initial | unset | revert — CSS-wide keywords accepted by every property
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">
Live Example
Related Topics

CSS object-position · CSS Aspect Ratio · CSS Writing Modes · CSS Masking

{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
Common Mistakes
  1. 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.
  2. Using object-fit: cover expecting the whole image to remain visible, cover crops overflowing edges by design.
  3. 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

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.