To resize a website screenshot without stretching it, set its width and let its height remain automatic: img { max-width: 100%; height: auto; }. If the image must fill a fixed-size frame, set the frame dimensions and choose object-fit: contain to show the entire image or cover to fill the frame while cropping the edges. Use srcset and sizes when you also need the browser to choose among differently sized image files.
First decide what “resize” needs to mean
An image on a page has two distinct sizing decisions: the dimensions of its <img> element’s box, and how the source image is drawn inside that box. CSS width and height control the box; object-fit controls how image content fits it. This distinction, described in MDN’s object-fit reference, is the key to avoiding unexpected distortion or cropping.
- Fit the available page width: use a fluid image with
max-width: 100%andheight: auto. - Fill a fixed design frame: give the image a fixed box and choose
containorcover. - Reduce the downloaded file size on different screens: provide multiple source files with
srcsetand describe the layout slot withsizes.
Changing an image’s CSS display size does not, by itself, select a smaller source file to download. That is why responsive layout and responsive image delivery are related but separate tasks.
Resize a screenshot fluidly without stretching it
For an ordinary content image, set its width as needed and leave its height at auto. When only one dimension is supplied, the browser can calculate the other while preserving the media’s original aspect ratio, as explained in MDN’s width reference.
The Tool Desk
Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →#1 Best Overall
- CRISP CLARITY: This 23.8″ Philips V line monitor delivers crisp Full HD 1920x1080 visuals. Enjoy movies, shows and videos with remarkable detail
- INCREDIBLE CONTRAST: The VA panel produces brighter whites and deeper blacks. You get true-to-life images and more gradients with 16.7 million colors
- THE PERFECT VIEW: The 178/178 degree extra wide viewing angle prevents the shifting of colors when viewed from an offset angle, so you always get consistent colors
- WORK SEAMLESSLY: This sleek monitor is virtually bezel-free on three sides, so the screen looks even bigger for the viewer. This minimalistic design also allows for seamless multi-monitor setups that enhance your workflow and boost productivity
- A BETTER READING EXPERIENCE: For busy office workers, EasyRead mode provides a more paper-like experience for when viewing lengthy documents
.screenshot {
display: block;
max-width: 100%;
height: auto;
}Apply the class to an image:
<img class="screenshot" src="screenshot.jpg" alt="Website screenshot">max-width: 100% lets the image shrink to fit its containing block rather than overflow it. It does not force a small image to grow beyond its natural width. height: auto keeps the image’s proportions as its rendered width changes. The display: block declaration is optional; it removes the default inline-image baseline gap that can leave a small space below the image.
Give the browser the original dimensions
When the source dimensions are known, add width and height attributes to the image. They describe its intrinsic dimensions; CSS can still make the image responsive. The browser can use those dimensions to establish the image’s proportions before its file has loaded.
<img
class="screenshot"
src="screenshot-800.jpg"
width="1600"
height="900"
alt="Website screenshot"
>Use the source file’s actual width and height for these attributes, not the dimensions at which it happens to appear on one particular screen. Another option is an explicit CSS aspect-ratio when a layout needs a reserved shape, but do not assign a ratio that conflicts with the intended image geometry.
Fit or crop an image inside a fixed frame
A fixed box is useful for consistent cards, galleries, or preview tiles. Set both dimensions on the image (or size the frame and make the image fill it), then select an object-fit mode. The property applies to replaced elements such as <img> and <video>; its available choices do not all preserve the same content or proportions.
Rank #2
- CRISP CLARITY: This 22 inch class (21.5″ viewable) Philips V line monitor delivers crisp Full HD 1920x1080 visuals. Enjoy movies, shows and videos with remarkable detail
- 100HZ FAST REFRESH RATE: 100Hz brings your favorite movies and video games to life. Stream, binge, and play effortlessly
- SMOOTH ACTION WITH ADAPTIVE-SYNC: Adaptive-Sync technology ensures fluid action sequences and rapid response time. Every frame will be rendered smoothly with crystal clarity and without stutter
- INCREDIBLE CONTRAST: The VA panel produces brighter whites and deeper blacks. You get true-to-life images and more gradients with 16.7 million colors
- THE PERFECT VIEW: The 178/178 degree extra wide viewing angle prevents the shifting of colors when viewed from an offset angle, so you always get consistent colors
| Value | What it does | Choose it when |
|---|---|---|
contain |
Preserves the source ratio and fits the whole image inside the box. Empty space may remain on two sides. | Every part of the screenshot must remain visible. |
cover |
Preserves the ratio while filling the box. Content outside the box is clipped. | A filled frame matters more than showing the edges. |
fill |
Fills the box by resizing content independently along each dimension; this can distort the image. | Distortion is acceptable for the specific design. |
none |
Leaves the content at its intrinsic size, which can extend beyond the box. | You need the original-scale object rather than a fitted image. |
scale-down |
Uses whichever results in the smaller rendered object: none or contain. |
The image may need to shrink to fit but should not be enlarged. |
These behaviors are detailed in the MDN object-fit reference.
.screenshot-frame {
width: 100%;
height: 320px;
}
.screenshot-frame img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}Switch cover to contain if the whole screenshot must appear, accepting that it may not fill the frame. In a page layout, the frame itself may need a constrained width or a responsive height; the example only sets its height to illustrate the fitting choice.
Keep the important part in view when cropping
With cover, the image’s outer edges may be cut off. object-position sets which part is aligned within the box; the default is centered. For example, to favor a region toward the top, use:
.screenshot-frame img {
object-fit: cover;
object-position: center top;
}For a screenshot, inspect the result to ensure cropping does not remove a navigation bar, dialog, or other content the image is meant to illustrate. MDN’s image-element reference describes object-fit and object-position as controls for fitting and positioning an image’s content in its box.
Rank #3
- Clear visuals. Fluid motion: A 144Hz refresh rate and 1ms MPRT deliver smooth, tear‑free motion across work, gaming, and streaming for clearer, more fluid viewing.
- Eye comfort: TÜV Rheinland 3‑star* certification reduces harmful blue light while preserving stunning color quality without compromise. *TÜV Rheinland 3-star eye comfort certification.
- Wide viewing angle: Get consistent views across a wide 178° /178° viewing angle.
- In-Plane Switching (IPS): See excellent color accuracy and consistency across wide viewing angles with In-plane Switching (IPS) technology.
- Ultra-thin bezels: Maximize your viewing experience with thin bezels.
Serve different image files for different screen sizes
CSS can make one source image appear at many widths, but the browser may still download that same file. To offer appropriate file sizes, create multiple versions and provide width-descriptor candidates in srcset. Use sizes to describe the image’s expected rendered slot width at relevant viewport conditions. The browser uses that information to select a candidate; when no candidate matches exactly, MDN’s responsive-images guide says it selects the first image larger than the slot and scales it down.
<img
class="screenshot"
src="screenshot-800.jpg"
srcset="screenshot-400.jpg 400w, screenshot-800.jpg 800w, screenshot-1600.jpg 1600w"
sizes="(max-width: 600px) 100vw, 800px"
width="1600"
height="900"
alt="Website screenshot"
>In this example, srcset lists actual image files and their pixel widths. The sizes value says the layout slot is the viewport width up to 600 CSS pixels and 800 CSS pixels above that. Update it if the page’s real layout differs; an inaccurate slot description can lead the browser to choose a file that is unnecessarily large or not sufficiently detailed.
Use srcset and sizes when the goal includes choosing a source file. Use CSS alone when the goal is only to lay out a single available file. For browser support details relevant to a particular target, consult the current MDN references and check the browsers your project supports; a complete compatibility matrix is not reproduced here.
Resize a screenshot file before adding it to a page
Sometimes the file itself—not just its appearance in a page—needs new pixel dimensions. A CSS rule changes rendered layout, not the stored source file. To prepare a resized asset, use an image editor or image-processing workflow, preserve the original proportions unless you deliberately want a crop, and export a version suited to the intended use. Keep a higher-resolution original if you will need additional responsive variants later.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Rank #4
- CURVED FOR ENHANCED ENGAGEMENT: An immersive viewing experience with a curved monitor that wraps more closely around your field of vision; It creates a wider view, enhancing depth perception and minimizing peripheral distraction
- SMOOTH PERFORMANCE FOR SEAMLESS CONTENT: Stay in the action when playing games, watching videos, or working on creative projects; The 100Hz refresh rate reduces lag and motion blur so you don't miss a thing in fast-paced moments¹
- MORE GAMING POWER: Gain the edge with optimizable game settings; Color and image contrast can be adjusted to see scenes more vividly and spot enemies hiding in the dark; Game Mode adjusts any game to fill the screen so you can view every detail²
- KEEP IT EASY ON THE EYES: Care for your eyes and stay comfortable, even during long sessions; Advanced eye comfort technology certified by TÜV reduces eye strain by minimizing blue light and reducing irritating screen flicker²
- INCREASED VERSATILITY: Connect to more; Plug devices straight into your monitor for increased flexibility, making your computing environment even more convenient
For a web page, decide separately: the desired display box, the source file dimensions available to download, and whether the image should be cropped. A 1600-pixel-wide source can be displayed in a 600-pixel slot with CSS; using a 600-pixel source candidate instead is a separate delivery choice made through responsive image markup.
Capture a screenshot at the size you need
If you are generating the screenshot rather than resizing an existing image, the capture viewport and output image dimensions are related but distinct. Choose a viewport that represents the page layout you want to show, then use responsive CSS or an appropriately sized frame to display the result. For an API-generated capture, use the documented options for viewport, full-page capture, or image output in that service’s documentation.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Or skip the browser setup
For a screenshot capture without configuring a browser, ScreenshotNeo returns an image or PDF from one GET request. This cURL example requests a WebP shot of Stripe:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpReplace YOUR_API_KEY with your key and change the target URL as needed. See the ScreenshotNeo API documentation for request parameters, output formats, and options. ScreenshotNeo is a website screenshot API and MCP server from Yorker Media. Its capture can accept consent banners and remove more than 60 known consent platforms, newsletter popups, and chat widgets before the shot; each step can be turned off. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, and responses indicate the page verdict and billing status in headers. Its MCP server provides take_screenshot, get_page_info, and capture_pdf tools for AI agents using Claude, Cursor, or another MCP client.
Free tools Windows power users keep installed
One-click scans. No signup required.
The Free plan includes 1,000 shots per month with no card; paid plans start at $5 for 3,000 shots. Learn about ScreenshotNeo, or sign up for 1,000 free screenshots a month with no card.
Best Value
- 【INTEGRATED SPEAKERS】Whether you're at work or in the midst of an intense gaming session, our built-in speakers provide rich and seamless audio, all while keeping your desk clutter-free.
- 【EASY ON THE EYES】 Protect your eyes and enhance your comfort with Blue-Light Shift technology. This feature reduces harmful blue light emissions from your screen, helping to alleviate eye strain during long hours of use and promoting healthier viewing habits.
- 【WIDEN YOUR PERSPECTIVE】Our sleek minimal bezel design ensures undivided attention. The nearly bezel-free display seamlessly connects in a dual monitor arrangement, delivering an unobstructed view that lets you focus on more at once, completely distraction-free.
Troubleshoot common resizing problems
- The image looks stretched: check for both CSS
widthandheightforcing a mismatched ratio. Useheight: autofor a fluid image, or set an intentional frame and choosecontainorcover. - The screenshot is cropped:
object-fit: coverintentionally clips content to fill its box. Change it tocontainto show the full image, or adjustobject-positionto move the crop. - There is empty space around the image: this is expected with
containwhen source and frame aspect ratios differ. Usecoveronly if cropping is acceptable. - The image overflows a narrow container: ensure the image has
max-width: 100%and that no more specific CSS overrides it with a larger width. - The page downloads a large image on mobile: CSS scaling does not necessarily change the downloaded source. Provide realistic
srcsetcandidates and asizesvalue matching the actual layout slot. - The browser chooses an unexpected candidate: verify that each width descriptor matches its file’s real pixel width, and that
sizesdescribes the layout at the relevant viewport conditions. - The image jumps or leaves a gap while loading: provide accurate intrinsic
widthandheightattributes or reserve a suitableaspect-ratioso the layout has known geometry before the image is fully rendered.
Frequently Asked Questions
Does CSS resizing change a screenshot’s original pixel dimensions?
No. CSS changes the rendered size in the page. To create a file with different pixel dimensions, export or process a new image asset.
Should I use width and height attributes if CSS sets the image width?
Yes, when you know the source dimensions. The attributes provide intrinsic geometry; CSS can still control the responsive display size.
Can I use object-fit on a background image?
No. object-fit applies to replaced elements such as <img> and <video>; CSS backgrounds use background-specific sizing and positioning properties.
Recommended Free Tools
Quick Recap
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.
