Give every link card the same thumbnail aspect ratio, then choose deliberately between cropping each image to fill the space and fitting the entire image inside it. Use relevant images, set focal points when crops matter, and provide a fallback for missing or unsuitable images. The right choice depends on whether an orderly grid or preserving every image matters more.
Start with the display box, not the source image
Images from different sites vary in dimensions and proportions. A shared container shape gives your curated list a consistent layout even when the source images are not alike. This is a design choice for your list, not a universal thumbnail size required by platforms.
As an Amazon Associate I earn from qualifying purchases.
Set a single aspect ratio for all cards and let CSS handle images within that box. For example, a 3:2 ratio can work for editorial link cards, but choose a shape that suits your design and content rather than treating that example as a standard.
Free tools Windows power users keep installed
One-click scans. No signup required.
.link-card__image {
aspect-ratio: 3 / 2;
overflow: hidden;
}
.link-card__image img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}This creates a stable box and fills it by cropping as needed. If the card itself is responsive, the box can scale with its width while keeping the same ratio.
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
Choose whether to crop or preserve the whole image
The two common fitting policies solve different problems. Neither is right for every curated list.
| Policy | CSS | What it does | Trade-off |
|---|---|---|---|
| Fill the box | object-fit: cover |
Fills the shared shape, cropping parts that do not fit. | Creates an even grid, but can cut off faces, text, or other meaningful content. |
| Show the full image | object-fit: contain |
Scales the whole image to fit inside the shared shape. | Preserves the image, but can leave unused space around it. |
To preserve the full image, change the rule to object-fit: contain and give the box a deliberate background color so any remaining space looks intentional:
.link-card__image {
aspect-ratio: 3 / 2;
overflow: hidden;
background: #f2f2f2;
}
.link-card__image img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
}Keep important content in frame
When using cover, browsers ordinarily center the crop. That works for many images, but it may hide the subject if the interesting content is off-center. Set a focal position on an individual image when needed:
Windows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallCrashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minuteRank #2
.link-card__image img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 65% 35%;
}The percentages position the image within the box; tune them for the subject you want to retain. If your saved link data includes a focal point, render it as an inline style or CSS custom property. Otherwise, use a per-image class or an editorial override. Do not assume one crop position suits every source.
Choose thumbnails that represent the destination
Uniform styling cannot make an unsuitable image representative. Google recommends choosing relevant images, avoiding generic logos and extreme aspect ratios, and using high-resolution images where possible. Review the image itself as well as how it looks in the card: a logo may identify a site but tell readers little about the linked page.
Test the layout with representative wide, square, and portrait images. Check both the card grid and narrower layouts, and inspect the crop for content that could be misleading or lost. This is a practical design check, not a platform-mandated test.
Set metadata for pages you control
If you control the linked pages, set an explicit Open Graph image in the page metadata. The Open Graph protocol defines og:image as the image URL representing the object, with optional structured properties for a secure URL, MIME type, width, height, and alt text. The protocol says: “If the page specifies an og:image it should specify og:image:alt.” See the Open Graph protocol.
Recommended Free Tools
<meta property="og:image" content="https://example.com/images/article.jpg">
<meta property="og:image:alt" content="A description of the image">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="800">Use accurate alt text that describes the image in context. Metadata helps preview consumers identify a representative image; it does not control how your own curated-list CSS crops that image.
Plan for missing images and external previews
External pages may not provide an image you want to use, and image requests can fail. Decide on a neutral fallback, such as a branded color block or simple generic illustration, and keep its dimensions consistent with the rest of the card. Avoid showing a broken-image icon or stretching a small icon to fill a large box.
Rank #4
If your list links to other sites, your card styles apply only to the cards you render. They do not dictate how a messaging app or another service renders a preview of the destination. Apple’s guidance for Messages says preview metadata must be available directly on the linked page and that Messages does not run JavaScript to generate the preview. Its recommendations include images at least 900 pixels wide, square icons at least 108 pixels per side, and a 10 MB associated-resource limit; these apply to Apple Messages previews, not ordinary thumbnail components. See Apple’s TN3156 guidance.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Or skip the browser setup
If your curated-list workflow needs screenshots of destination pages as thumbnails, you can request an image from ScreenshotNeo, a website screenshot API and MCP server. A screenshot is not a substitute for choosing a representative thumbnail or setting metadata on pages you control, but it can provide an image capture when that suits your list.
Quick wins for a faster PC:
Clear out junk files and repair common Windows errorsFree Scan →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Repair Windows errors before they cause bigger problemsFix Now →One-call cURL example (see the ScreenshotNeo API documentation for options):
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp- Cookie and consent banners, newsletter popups, and chat widgets are removed before capture; each cleanup step can be turned off.
- Bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed. Response headers report the page verdict and billing status.
- An MCP server offers screenshot tools for AI agents, including Claude, Cursor, and other MCP clients.
- The Free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000 screenshots.
Sign up for 1,000 free screenshots a month, with no card required.
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.
