What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
To create card images that stay the same shape without stretching, put meaningful images in an <img> element, give the image or its wrapper a predictable height or aspect-ratio, and use object-fit. Choose cover when filling the frame matters and cropping is acceptable; choose contain when the complete image must remain visible. Use CSS background images only for decoration.
The core pattern: a defined frame and an image-fit rule
An image has its own intrinsic width-to-height ratio. A card has a different, responsive width. If you set only width: 100%, cards with different source images can end up with different heights. If you force both dimensions without a fit rule, the browser can distort the picture.
The reliable sequence is:
- Choose a consistent image frame, either a fixed row height or an aspect ratio.
- Make the image fill that frame with
width: 100%andheight: 100%(or an aspect ratio directly on the image). - Use
object-fit: coverorcontainto preserve the source ratio. - Set
object-positionwhen the important subject is not centered.
Here is a complete card collection you can paste into a page:
<div class="cards">
<article class="card">
<h2>Alpine trail</h2>
<img src="trail.jpg" alt="A hiker walking beside an alpine lake">
<div class="content">A concise description of the route.</div>
</article>
<article class="card">
<h2>City architecture</h2>
<img src="building.jpg" alt="Glass office buildings reflected in a plaza">
<div class="content">Modern buildings in the downtown district.</div>
</article>
</div>.cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
gap: 20px;
}
.card {
display: grid;
grid-template-rows: max-content 200px 1fr;
overflow: hidden;
}
.card img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}The 200px row is an example, not a universal requirement. Increase it for a prominent photograph, reduce it for compact lists, or replace it with an aspect ratio when the frame should scale with card width.
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
Fixed-height card images
A fixed grid row gives every card in a collection the same image height. This is useful when cards line up in a dashboard or product grid and predictable scanning is more important than showing every pixel.
.card {
display: grid;
grid-template-rows: max-content 180px 1fr;
}
.card img {
width: 100%;
height: 100%;
object-fit: cover;
}Do not set a fixed height on the image while leaving its grid row unconstrained and expecting the surrounding layout to align automatically. Define the track (as above) or define a wrapper with an explicit height. The image then has a real display box in which the fit algorithm can work.
Responsive images with aspect-ratio
Use an aspect ratio when the image area should grow and shrink proportionally. A 16:9 frame becomes shorter on a narrow card and wider on a large card while preserving the same shape.
.card img {
display: block;
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
object-position: center;
}You can put the ratio on a wrapper instead, which is useful when you need a background, overlay, or caption layered over the image:
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 glitches.card-media {
aspect-ratio: 4 / 3;
overflow: hidden;
}
.card-media img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}Choose the ratio from the content: portrait products may suit 4:5, editorial thumbnails often use 3:2, and video-like previews commonly use 16:9. The ratio controls the box; it does not change the source file.
cover versus contain
| Value | What it does | Use it when | Trade-off |
|---|---|---|---|
cover |
Fills the entire box while preserving the source ratio. | A consistent, edge-to-edge card frame is more important than showing every edge. | Parts of the image can be cropped when the ratios differ. |
contain |
Shows the complete source inside the box while preserving its ratio. | The whole product, diagram, logo, or screenshot must remain visible. | Unused space can appear on two sides of the image. |
fill |
Stretches the source to both dimensions. | Only when distortion is explicitly acceptable. | Circles become ovals and people or objects can look deformed. |
/* A photograph where edge-to-edge framing is desirable */
.photo-card img {
object-fit: cover;
}
/* A product image that must be shown in full */
.product-card img {
object-fit: contain;
background: #f3f4f6;
}With cover, cropping is intentional. If a face, product label, or other focal point is cut off, move the visible area:
.card img {
object-fit: cover;
object-position: 50% 30%;
}
/* Equivalent keyword examples */
.hero img { object-position: top; }
.product img { object-position: center right; }If no crop is acceptable, switch to contain and style the surrounding background so the remaining space looks deliberate.
Meaningful images versus decorative backgrounds
Use <img> when the image communicates information. Give it alternative text that describes the image’s purpose in the card. A concise description is usually better than a filename or a long visual inventory.
PC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11Outdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware match<img src="camera.jpg" alt="Black mirrorless camera with a 35 mm lens">If the image is purely decorative, a CSS background can simplify layering with text or gradients. It must not be the only way a user receives essential information, because assistive technology does not treat a background image as an image with alternative text.
.promo-card {
min-height: 240px;
padding: 1.5rem;
color: white;
background-color: #243041; /* fallback if the image fails */
background-image:
linear-gradient(rgb(0 0 0 / 0.45), rgb(0 0 0 / 0.45)),
url("mountains.jpg");
background-size: cover;
background-position: center;
}Check text contrast against the chosen image. A fallback color should still provide a readable design if the network request fails.
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
Making a complete card component
This example combines a responsive collection, equal media areas, flexible text, and a footer that remains at the bottom of each card.
<div class="cards">
<article class="card">
<div class="card-media">
<img src="lake.jpg" alt="Turquoise lake below snow-covered peaks">
</div>
<div class="card-body">
<h2>Lake route</h2>
<p>A two-hour walk with views from the northern ridge.</p>
<a href="/routes/lake">View route</a>
</div>
</article>
</div>.cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
gap: 20px;
}
.card {
display: grid;
grid-template-rows: auto 1fr;
border: 1px solid #d7dce2;
border-radius: 0.5rem;
overflow: hidden;
background: white;
}
.card-media {
aspect-ratio: 3 / 2;
overflow: hidden;
}
.card-media img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.card-body {
display: grid;
align-content: start;
gap: 0.5rem;
padding: 1rem;
}
.card-body h2,
.card-body p {
margin: 0;
}Long titles and descriptions can still make cards different heights if the outer grid is not stretching rows as you expect. That is usually preferable to hiding content. If your design demands equal overall heights, use a grid layout for the card body and place the link in a final row, but avoid clipping text merely to force alignment.
The Tool Desk
Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Decision checklist
- Is the image informative? Use
<img>and purposefulalttext. - Is it decorative? A background image is suitable; provide a fallback color.
- Must every edge remain visible? Use
contain. - Should every card touch the same frame edges? Use
coverand accept or control cropping. - Should the shape stay fixed as width changes? Use
aspect-ratio. - Do all cards need the same media height? Use a consistent grid row or wrapper height.
Common problems and fixes
The image is stretched
Check for a fixed width and height without object-fit. Give the image a defined box and set object-fit: cover or contain. Avoid fill when the source and frame ratios differ.
The crop removes the subject
cover has to crop somewhere. Set object-position toward the subject, or use contain when cropping is unacceptable.
Card images have different heights
Give every image the same aspect ratio or put them in the same fixed-height grid track. Make sure the image itself has height: 100% when it is filling a wrapper.
A blank band appears beside a product
That is the expected result of contain when the source ratio differs from the box. Match the background to the card, adjust the ratio, or choose cover only if cropping is safe.
Text information disappears with a background image
Move meaningful imagery into an <img> element with alternative text. Keep backgrounds for decoration and visual atmosphere.
The image flashes or leaves an unexpected gap
Use display: block on images to remove the inline baseline gap. Keep the aspect ratio on the image or wrapper so the layout reserves space before the file finishes loading.
Performance and responsive details
Use appropriately sized source files rather than downloading a large original for a small card. A responsive grid can create many cards at once, so avoid loading dimensions that the layout cannot display. Preserve the intrinsic ratio with width and height attributes when you know the source dimensions, or with an aspect-ratio wrapper, to reduce layout movement while images load.
Test at the narrowest supported width, a typical desktop width, and a very wide display. Inspect portraits, landscapes, transparent product renders, and images with subjects near the edge. Those cases reveal whether cover, contain, and object-position match your content rules.
Best Value
Or skip the browser setup
When you need reference screenshots of your cards at repeatable viewport settings, ScreenshotNeo can capture the rendered page through one request. It accepts the cookie or consent banner like a visitor, then removes more than 60 known consent platforms, newsletter popups, and chat widgets before the capture; each cleanup step can be disabled. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, and the response identifies the page verdict and billing result in X-Page-Verdict and X-Billed headers. Its MCP server provides take_screenshot, get_page_info, and capture_pdf tools for Claude, Cursor, and other MCP clients.
Use the API examples in the ScreenshotNeo documentation. Replace the URL with a page that contains your card component.
cURL
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpPython
import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"}, timeout=90)
open("shot.webp", "wb").write(r.content)Node.js
const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);ScreenshotNeo includes full-page capture with lazy images loaded, CSS-selector element capture, dark mode, 12 device presets plus custom viewports, retina scale, custom CSS and JavaScript, click and wait controls, request and resource blocking, headers, cookies, user-agent, authorization, timezone and geolocation, transparent backgrounds, resizing, configurable-TTL caching, signed image links, asynchronous jobs with signed webhooks, bulk capture of up to 100 URLs per call, usage reporting, and an OpenAPI specification. Existing parameter names used by other screenshot APIs also work, which can simplify migration.
The Free plan includes 1,000 shots per month with no card. Paid plans start at $5 for 3,000 shots; yearly billing gives two months free, and every feature is included on every plan. Sign up for the free plan to capture your card layouts without adding a payment card.
Frequently Asked Questions
Should I put aspect-ratio on the image or its wrapper?
Put it on the image for a simple card. Use a wrapper when you need overlays, clipping, or a background behind a contained image.
Can CSS make differently sized source files identical without cropping?
It can make their display boxes identical. Showing the complete source with contain may leave empty space; filling the box with cover may crop.
What alt text should a card image have?
Describe the information the image adds to that card, not every visible detail. If it is decorative and repeated by nearby text, an empty alt attribute can be appropriate.
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.
Quick wins for a faster PC:
Clear out junk files and repair common Windows errorsFree Scan →Scan for outdated or missing drivers - takes under a minuteDriver Scan →
