Object-fit Property
Last updated: 2026-09-13
object-fit Object-fit Property
The object-fit property controls how the content of a replaced element such as an <img> or <video> fits into its specified width and height. When the element's aspect ratio differs from its content, object-fit decides whether to stretch, crop while keeping the ratio, or show everything — an indispensable tool for responsive image layouts.
| Category | |
|---|---|
| Initial Value | fill |
| Inherited | No |
| Applies To | |
| Animation Type | |
| CSS Version | CSS3 |
| Status | Standard |
📝 Syntax
object-fit: fill | contain | cover | none | scale-down;⚙️ Values
| Value | Type | Description |
|---|---|---|
fill | contain | cover | none | scale-down | Keyword | How the replaced element's content is fitted |
▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| object-fit | ✓ v30 | ✓ v12 | ✓ v36 | ✓ v9 | ✓ v16 |
| Supported in all major browsers | |||||
Tip： cover is the most common value: it keeps the image's aspect ratio and fills the container, cropping the overflow — ideal for square thumbnails.
Tip： object-fit needs an explicit width and height on the element to take effect; setting only width or height alone does not trigger the fitting behavior.
❓ FAQ
QWhat is the difference between object-fit and background-size?
Aobject-fit applies to replaced elements like img and video, controlling how the content fits into the element's box. The image stays in the document flow and remains visible to SEO, alt text, and crawlers. background-size applies to background images and suits purely decorative content. Use img with object-fit for content images, and background with background-size for decoration.
QWhat is the difference between scale-down and contain in object-fit?
Acontain scales the image proportionally to fit the container completely; when the image is smaller than the container it is scaled up to fill it (ratio preserved). scale-down picks whichever of none (the natural size) and contain is smaller, so small images are never scaled up. Use scale-down for small images to avoid blurriness; for large images the two usually give the same result.
QWhy does object-fit: cover crop my image? How do I keep the important part?
Acover preserves the ratio and fills the container, so whenever the aspect ratios differ it must crop the excess — by default it keeps the center region. To preserve the key content (a face, a logo), move the crop focus with object-position, e.g., object-position: top keeps the top. You can also use aspect-ratio so the container matches the image and avoid cropping entirely.
QWhy is the object-fit property not working on my image element?
AThe most common cause is that the element has no definite width and height: when only one dimension is set and the other is auto, a replaced element scales by its own ratio and object-fit has nothing to fit. Also confirm it is a replaced element (<img>, <video>, <iframe>, <embed>) — content in a plain div is not controlled by object-fit. Checking these two points usually solves it.
🏷️ Related Properties
💡 Related Cases
📚 Related Tutorials
