Free tools Windows power users keep installed
One-click scans. No signup required.
To fit an image into a fixed-size container without stretching it, set the image’s width and height, then use 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 move the crop toward the subject.
Choose the result you need
object-fit controls how an image or other replaced content is drawn inside its element’s content box. It does not set the element’s dimensions. The right value depends on whether you need to fill the box, preserve the entire image, or retain its natural size.
| Value | What it does | Use it when |
|---|---|---|
cover |
Preserves the image’s aspect ratio and fills the box. If the ratios differ, some of the image is clipped. | A card, thumbnail, or frame must be filled and cropping is acceptable. |
contain |
Preserves the aspect ratio and fits the whole image inside the box. Unfilled space may remain. | The entire image must remain visible, as with a diagram, product image, or logo. |
fill |
Fills the box, stretching the image if its natural ratio differs. This is the initial value. | Distortion is acceptable, or the source already has the box’s ratio. |
none |
Does not resize the image to fit the box. | You want the object at its original size, even if it does not fill the box. |
scale-down |
Uses whichever result is smaller: none or contain. |
The image should not be enlarged beyond the smaller of its native-size and contained-size results. |
The CSS Images Module Level 3 defines these five values. The choice is a trade-off: cover may crop, contain may leave space, and fill may distort the image. W3C CSS Images Module Level 3 and MDN’s object-fit reference describe these behaviors.
Set the image box before choosing object-fit
Give the image a box with dimensions suited to the layout. For example, this CSS makes a card image fill a 12-rem-tall frame, cropping as needed while preserving the source ratio:
Do these 3 things before closing this tab:
1Repair Windows errors before they cause bigger problems2Fix the driver behind crashes, sound loss and screen glitches3Clear out junk files and repair common Windows errors#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;
}When only one dimension is specified, the browser normally calculates the other from the image’s intrinsic aspect ratio. When both dimensions are set, the box can have a different ratio from the source. The initial fill behavior can then stretch the image; switch to cover or contain to preserve its ratio.
If the design needs to adapt to the available width, use a fluid width and choose a height appropriate to the frame. If the design requires the whole image and its natural proportions, contain can fit it within that frame without clipping. In either case, remember that object-fit changes the rendering inside the element; it does not create the box for you.
Move the crop with object-position
With object-fit: cover, centered cropping can cut off a face or another focal point. Set object-position to align the image differently inside its box:
.hero-image {
width: 100%;
height: 24rem;
object-fit: cover;
object-position: 60% 30%;
}The initial position is centered at 50% 50%. You can also use keywords such as top or right, or choose percentage and length positions. Inspect the actual image in its target frame to choose a suitable position; no single crop alignment works for every source. With contain, any unfilled areas show 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
Check which elements object-fit affects
object-fit applies to replaced elements such as <img> and <video>; it is not a general-purpose sizing property for all HTML elements. MDN notes that it has no effect on <iframe>, <embed>, or <fencedframe>. MDN: object-fit
MDN marks the property Baseline Widely available. Its reference also notes that the formal grammar reflects a newer standard and not every browser may implement every part. The established values described above are the common use case; check compatibility if your CSS depends on newer syntax. MDN compatibility and syntax notes
Troubleshoot the visible result
- The image looks stretched: Check whether both width and height constrain it and whether it is using the initial
fillbehavior. Choosecoverif cropping is acceptable orcontainif the whole image must remain visible. - The image does not fill the box: Confirm the image element itself has the intended dimensions.
object-fitcontrols the content inside its box, not the box size. - An important subject is cropped: Keep
coverand adjustobject-positionto move the visible area toward the subject. - There is empty space around the image: That is expected with
containwhen the image and box ratios differ. The box’s background appears in the remaining space; usecoveronly if filling the frame is more important than showing every part of the image. - The rule has no effect: Check that the target is an applicable replaced element, such as an
<img>or<video>, rather than an iframe or another unsupported element.
Or skip the browser setup
If you need a screenshot of a page to inspect an image layout, ScreenshotNeo can return an image from one GET request. Its website screenshot API accepts the page URL and returns a PNG, JPEG, WebP, or PDF. For example, this cURL request saves a WebP capture of a page:
Quick Recap
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 a shot; bot checks, blank pages, and failed loads are not billed. It also has an MCP server for AI agents. The Free plan includes 1,000 screenshots per month with no card, and paid plans start at $5 for 3,000. Sign up for 1,000 free screenshots a month with no card.
Recommended Free Tools
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.
