Do these 3 things before closing this tab:
1Scan for outdated or missing drivers - takes under a minute2Repair Windows errors before they cause bigger problems3Fix the driver behind crashes, sound loss and screen glitchesTo fit an image in a fixed-size container without stretching it, set the image’s dimensions and choose object-fit: cover to fill the box with a crop, or object-fit: contain to show the whole image with possible empty space. Use object-position to adjust which part remains visible when cropping.
Choose the result you need
object-fit controls how media content is rendered inside a replaced element’s content box. For an <img>, the choice is mainly between covering the box and preserving the entire image. The CSS Images Module Level 3 defines five values for the property: fill, contain, cover, none, and scale-down.
As an Amazon Associate I earn from qualifying purchases.
| Value | What happens | Use it when |
|---|---|---|
cover |
The image keeps its aspect ratio and fills the box. If the image and box have different aspect ratios, part of the image is clipped. | A card, thumbnail, or frame must be completely filled and cropping is acceptable. |
contain |
The whole image fits inside the box without changing its aspect ratio. Unfilled space may remain. | The complete asset must be visible, such as a logo, diagram, or product image. |
fill |
The image fills the box and may be stretched if its natural aspect ratio differs. This is the initial value. | Distortion is acceptable, or the source already has the box’s aspect ratio. |
none |
The image is not resized to fit the box. | You want the object’s original size, even if it does not fill the box. |
scale-down |
The browser uses whichever is smaller: the result of none or contain. |
The image should not be enlarged beyond the smaller of those two outcomes. |
In practice, ask three questions: must the entire image remain visible, must the box be fully covered, and is cropping acceptable? Choose contain for the whole image, cover for a fully filled frame, and fill only if stretching is acceptable.
Free tools Windows power users keep installed
One-click scans. No signup required.
Give the image a box to fit
object-fit changes how the image is drawn inside the image element; it does not set the element’s layout dimensions. Give the element a useful width and height through CSS or layout, then set the fit behavior:
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
.card-image {
display: block;
width: 100%;
height: 12rem;
object-fit: cover;
object-position: center;
}This example makes the image fill a 12-rem-high card slot. The default centered position crops evenly around the center when the source and box ratios differ. Change cover to contain if the whole image must show, accepting that the box may have unfilled space.
When only one dimension is specified, the browser normally calculates the other while preserving the media’s intrinsic aspect ratio. Setting both dimensions can create a box with a different ratio from the source. With the default fill, that can make the image look stretched; cover and contain preserve the source ratio and differ in whether they crop or leave space.
Adjust the visible crop with object-position
object-position aligns the image content inside its element’s box. Its initial position is centered, equivalent to 50% 50%. If centered cropping cuts off a face or product, shift the visible area toward the subject:
.hero-image {
width: 100%;
height: 24rem;
object-fit: cover;
object-position: 60% 30%;
}Positions can also use keywords such as top or right, or length and percentage values. Choose a position by checking the actual source image against the target frame; a crop that works for one image may fail for another. With contain, any uncovered area shows the element’s background.
Rank #3
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
Use object-fit on the right elements
The property applies to replaced elements, including typical <img> and <video> elements. It does not affect every element that can display content: MDN notes that it has no effect on <iframe>, <embed>, or <fencedframe>. object-fit is not inherited, and its initial value is fill. See the CSS Images Module Level 3 and MDN’s object-fit reference.
MDN marks object-fit “Baseline Widely available.” Its reference also notes that the formal grammar reflects a newer standard and not every browser may implement every part. If you rely on newer syntax rather than the established values shown here, check compatibility for your target browsers in MDN’s compatibility information.
Troubleshoot a fit that looks wrong
- The image looks stretched: Check whether both its rendered width and height are constrained while
object-fitis stillfill. Usecoverorcontainaccording to whether filling the box or showing all content matters more. - The image does not fill the slot: Confirm that the image element itself has the intended dimensions.
object-fitcontrols the content inside its box, not the box’s size. If full coverage is required, usecover. - An important subject is cropped: Keep
coverif the frame must stay filled, then adjustobject-positionto place the subject in the visible area. - Empty bands appear around the image: This is expected with
containwhen the ratios differ. Use the element’s background for the remaining space, or choosecoverif cropping is acceptable.
Or skip the browser setup
If you need a screenshot of a page to inspect the rendered result, ScreenshotNeo provides a one-request API. For example, this cURL command captures a page as WebP:
Quick wins for a faster PC:
Scan for outdated or missing drivers - takes under a minuteDriver Scan →Clear out junk files and repair common Windows errorsFree Scan →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpSee the ScreenshotNeo API documentation for request options. ScreenshotNeo removes cookie banners, newsletter popups, and chat widgets before the shot; bot checks, blank pages, and failed loads are not billed. Its MCP server lets AI agents take screenshots, and the free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000. Learn about ScreenshotNeo, or sign up for the free plan.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Frequently Asked Questions
Does object-fit set an image’s width and height?
No. It controls how the image content fits inside the element’s content box; set the element’s dimensions separately.
Which value prevents cropping?
Use contain to keep the whole image visible. The box may have unfilled space.
Quick Recap
Can I use object-fit on an iframe?
No. MDN states that object-fit has no effect on <iframe>.
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
