fill, the default, stretches the content to completely fill its box, distorting its aspect ratio if the box's proportions don't match the content's natural ones — cover scales the content, preserving its aspect ratio, to completely fill the box, cropping any excess, exactly like background-size: cover; contain instead scales it to fit entirely within the box without cropping, potentially leaving empty space, exactly like background-size: contain; and none displays the content at its natural size regardless of the box's dimensions, potentially overflowing or leaving empty space around it. This is specifically for actual embedded content elements like <img> and <video>, distinct from background-size, which serves the equivalent purpose for CSS background images instead.
1Understanding Object-fit
fill, the default, stretches the content to completely fill its box, distorting its aspect ratio if the box's proportions don't match the content's natural ones — cover scales the content, preserving its aspect ratio, to completely fill the box, cropping any excess, exactly like background-size: cover; contain instead scales it to fit entirely within the box without cropping, potentially leaving empty space, exactly like background-size: contain; and none displays the content at its natural size regardless of the box's dimensions, potentially overflowing or leaving empty space around it. This is specifically for actual embedded content elements like <img> and <video>, distinct from background-size, which serves the equivalent purpose for CSS background images instead.
Use object-fit: cover on an <img> element specifically when you need it to completely fill a fixed-size box without distorting its aspect ratio, cropping any excess instead — this avoids the default fill behavior's tendency to visually squash or stretch images that don't naturally match the box's exact proportions.
img {
width: 300px;
height: 300px;
object-fit: cover;
}2Practical Example
Here is a real-world application of Object-fit showing how it is used in production CSS code.
img {
width: 300px;
height: 300px;
object-fit: contain;
}3Best Practices
Follow these guidelines when working with Object-fit:
1. Use object-fit: cover for <img>/<video> elements that need to completely fill a fixed-size box while preserving their natural aspect ratio, cropping any excess
2. Avoid relying on the default fill value when an image's natural aspect ratio doesn't closely match its container's box, since fill distorts and stretches the image to force it to fit exactly
3. Pair object-fit with object-position, which works like background-position, to control which part of the content remains visible when cropping occurs under object-fit: cover
Tip: Use object-fit: cover on an <img> element specifically when you need it to completely fill a fixed-size box without distorting its aspect ratio, cropping any excess instead — this avoids the default fill behavior's tendency to visually squash or stretch images that don't naturally match the box's exact proportions.
img {
width: 300px;
height: 300px;
object-fit: cover;
}