The Tool Desk
Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Use CSS aspect-ratio to keep thumbnail boxes consistent, object-fit: cover to fill them without stretching, and border-radius to round their corners. A cover crop may cut off part of an image; use contain instead when showing the whole image matters more than filling the box.
Build a responsive thumbnail with CSS
Let the layout set the image width and let aspect-ratio determine its height. This example makes landscape thumbnails with a 16:9 ratio and 12-pixel rounded corners:
As an Amazon Associate I earn from qualifying purchases.
<img class="thumbnail" src="photo.jpg" alt="Describe the image">.thumbnail {
display: block;
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
border-radius: 12px;
}Replace the example alt text with a concise, accurate description. For a decorative image that adds no information, use alt="".
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Understand the ratio and sizing
aspect-ratio is width divided by height: 16 / 9 produces a landscape shape, while 1 / 1 produces a square. It establishes a preferred ratio, not a fixed pair of dimensions. At least one of the box’s dimensions must be automatic for the ratio to affect its sizing, as explained in MDN’s aspect-ratio guide.
#1 Best Overall
In a responsive card grid, give the image a width such as 100% and leave its height automatic so the ratio can determine the height. If both width and height are explicitly set, the ratio does not decide the resulting proportions.
Choose how the image fits
object-fit controls how an image fills its element when the image is resized. The two useful options for thumbnails make different trade-offs:
| Value | What it does | Choose it when |
|---|---|---|
cover |
Preserves the source image’s proportions and fills the box, clipping excess where the image and box ratios differ. | You need a consistently filled thumbnail and can accept cropping. |
contain |
Preserves the image’s proportions and shows the whole image, leaving unused space in the box if the ratios differ. | Keeping every part of the source visible matters more than filling the box. |
Avoid fill when preserving the source image’s proportions matters: with mismatched ratios, it can stretch the image. See MDN’s object-fit documentation for the property’s behavior.
Keep important details in the crop
With cover, the default centered crop can cut off a face, label, or other focal detail. Adjust object-position to align the image content within its box. For example, object-position: center top; favors the top of the image; choose the alignment that keeps the important subject visible.
Rank #3
.thumbnail {
display: block;
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
object-position: center top;
border-radius: 12px;
}Round the corners of the image or its frame
border-radius rounds an element’s outer corners. A fixed length such as 12px gives a predictable radius; a percentage is relative to the box and can look different as its dimensions change. More on its syntax is available in MDN’s border-radius documentation.
For a simple image, apply the radius directly to the <img>. If a wrapper defines the crop, put the ratio and radius on the wrapper, make the image fill it, and clip overflow:
<div class="thumbnail-frame">
<img src="photo.jpg" alt="Describe the image">
</div>.thumbnail-frame {
width: 100%;
aspect-ratio: 16 / 9;
border-radius: 12px;
overflow: hidden;
}
.thumbnail-frame img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}The wrapper’s overflow: hidden clips the child image to the rounded frame. The ratio, fit mode, and radius are design choices: pick the ratio your layout needs, the fit mode that suits the image, and a radius that matches the design.
Do these 3 things before closing this tab:
1Clear out junk files and repair common Windows errors2Fix the driver behind crashes, sound loss and screen glitches3Repair Windows errors before they cause bigger problemsTroubleshoot common results
- The thumbnails do not share a consistent shape: check that each image has the same
aspect-ratioand that at least one dimension is automatic. In a wrapper-based layout, put the ratio on the wrapper and size the image to fill it. - The image looks stretched: use
object-fit: coverorcontaininstead offillwhen the source proportions must be preserved. - The subject is cut off: keep
coverif the box must be filled, then adjustobject-position. Switch tocontainif the entire image must remain visible, accepting possible empty space. - The image corners remain square inside a rounded frame: make sure the frame has both
border-radiusandoverflow: hidden, and that the image fills the frame.
Or skip the browser setup
If you need a screenshot of a webpage as a thumbnail source, ScreenshotNeo can return an image from one GET request. The CSS above still controls the thumbnail’s display ratio and rounded corners on your site.
For example, this cURL request saves a WebP screenshot of Stripe’s website:
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. Before capture, it accepts cookie or consent banners like a visitor and removes more than 60 known consent platforms, newsletter popups, and chat widgets; each step can be turned off. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits cost nothing, and responses identify the page verdict and billing status in headers. Its MCP server provides take_screenshot, get_page_info, and capture_pdf tools for AI agents. The Free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000 shots.
Sign up for ScreenshotNeo’s free plan to get 1,000 screenshots a month with no card.
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.
