Do these 3 things before closing this tab:
1Fix the driver behind crashes, sound loss and screen glitches2Clear out junk files and repair common Windows errors3Scan for outdated or missing drivers - takes under a minuteBuild an image card with semantic HTML, CSS Grid, and an image-sizing rule chosen for the content: use object-fit: cover when a consistent, filled frame matters more than showing every edge; use contain when the entire image must remain visible. Neither stretches the source image. The example below creates a responsive card collection and explains how to adjust its crop, proportions, and accessibility.
Build a basic image card
A card is a reusable component that groups related content, often a heading, image, description, and optional footer. Use an HTML element that fits the content’s meaning, such as <article> for a self-contained item. Put the image in an <img> element when it conveys information; that gives it an alternative text attribute and keeps the image’s purpose apparent in the markup.
<section class="cards" aria-label="Featured places">
<article class="card">
<h2>Coastal trail</h2>
<img
src="coastal-trail.jpg"
alt="A winding trail above the sea"
width="1200"
height="800"
>
<div class="card__content">
<p>Follow the cliff path for views across the bay.</p>
<a href="/trails/coastal">Explore the trail</a>
</div>
</article>
<article class="card">
<h2>Mountain lake</h2>
<img
src="mountain-lake.jpg"
alt="A still lake beneath a mountain ridge"
width="1200"
height="800"
>
<div class="card__content">
<p>A quiet shoreline at the end of the valley.</p>
<a href="/trails/mountain-lake">Explore the lake</a>
</div>
</article>
</section>The width and height attributes communicate each source image’s intrinsic dimensions; use the actual dimensions of your files. The CSS below sets a consistent image region while allowing the cards to adapt to available width.
* {
box-sizing: border-box;
}
.cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
gap: 1.25rem;
}
.card {
display: grid;
grid-template-rows: max-content 12rem 1fr;
overflow: hidden;
border: 1px solid #999;
border-radius: 0.5rem;
background: #fff;
color: #1b1b1b;
}
.card h2 {
margin: 0;
padding: 1rem;
font-size: 1.25rem;
}
.card img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.card__content {
padding: 1rem;
}
.card__content p {
margin-top: 0;
}
.card__content a {
color: #075ea8;
}The 230px minimum track and 12rem image row are starting design choices, not CSS requirements. Change them to suit your layout, content, and supported viewport sizes.
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
Choose how the image fits
The right fit depends on whether the image must fill a fixed frame or remain entirely visible. In all cases, the image keeps its proportions unless you explicitly choose a stretching behavior.
| Rule | What it does | Use it when |
|---|---|---|
object-fit: cover |
Fills the image box while preserving the source ratio; parts that do not fit are cropped. | A uniform, filled image area is more important than showing the full image. |
object-fit: contain |
Shows the entire image inside the box while preserving its ratio; unused space may remain. | The whole image must be visible, such as a product or diagram. |
object-fit: fill |
Fills the box and can distort the image to match its dimensions. | Only when distortion is acceptable; usually avoid it for photographs. |
For contain, give the empty area a deliberate color so it reads as part of the design:
.card img {
width: 100%;
height: 100%;
object-fit: contain;
background-color: #f1f3f5;
}Do not expect cover to show the entire source image. Check the resulting crop at both wide and narrow card widths, especially when the subject is near an edge.
Set a consistent image shape
A fixed image row, as in the first example, keeps cards aligned even when their source images have different proportions. Alternatively, use aspect-ratio to define a proportional image frame. Pair it with object-fit so a source with a different ratio is handled predictably.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
.card img {
display: block;
width: 100%;
aspect-ratio: 3 / 2;
object-fit: cover;
}With this version, the image’s displayed frame follows the 3:2 ratio as its width changes. cover fills that frame and may crop the source. To show the complete image instead, substitute contain and style the remaining space. Choose the ratio to suit the design rather than treating any one ratio as mandatory.
Keep the important subject in view
When cover crops the image, object-position changes which part is kept in view. The default centers the image; adjust the position when the subject is off-center.
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
.card img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 35%;
}Try a position such as center 35% on the actual image, then inspect how it behaves at the narrowest card size. A crop that looks balanced in a wide card may cut off a face or other important detail when the frame gets narrower. If no crop preserves the needed content, use contain or change the image-frame proportions.
Make the card collection responsive
CSS Grid lays cards out in columns and moves them to additional rows as space changes. In repeat(auto-fill, minmax(230px, 1fr)), the browser fits as many tracks as it can while keeping each at least 230px wide, then distributes remaining space. Adjust the minimum to match the content: longer headings or more complex card controls may need wider cards.
Recommended Free Tools
.cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
gap: 1.25rem;
}The auto-fill pattern can leave unused grid tracks when there are fewer cards than could fit. If you prefer the existing cards to expand into available space, use auto-fit instead:
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
gap: 1.25rem;
}Grid is for arranging the card collection; each card can also use Grid to place its own heading, image, content, and footer. Flexbox is another option for arranging items inside a card, particularly when a single-axis layout is more convenient. Choose the layout method based on the relationships between the content areas.
Choose meaningful images and alternatives
If the image conveys information, give it useful alternative text in alt. Describe the image’s relevant meaning in the context of the card, rather than listing every visible detail. If the image merely decorates content already expressed in nearby text, an empty alt="" prevents it from adding redundant information to the reading experience.
A CSS background is suitable when an image is decorative and belongs behind text or other content. It does not provide an alt attribute, so do not use it as the only way to convey information. For a decorative background, cover and position it with CSS:
Quick wins for a faster PC:
Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Repair Windows errors before they cause bigger problemsFix Now →.card--decorative {
background-image: url("coastal-trail.jpg");
background-size: cover;
background-position: center;
}background-size: cover fills the element and may crop the background; contain shows the whole background but may leave gaps. Use background-position to move the visible area. When text sits over an image, check its contrast across the visible crop and provide a suitable surface behind text if needed.
Common problems and fixes
- The image looks stretched. Check that it has a bounded frame and uses
object-fit: coverorcontain. A width and height alone can change the displayed proportions iffillis in effect. - The subject is cut off. That is the expected trade-off with
cover. Adjustobject-position, change the frame ratio, or switch tocontainif all image content must remain visible. - There are empty bars around an image. That can happen with
containbecause the whole image is preserved. Set a background color for the image area or usecoverif cropping is acceptable. - Cards have uneven image heights. Give images a shared row size or
aspect-ratio, and make sure the image fills that defined frame. Source files do not need identical proportions if the frame is consistent. - Cards are too narrow or too wide. Change the minimum in
minmax(). It is a layout preference, not a universal value; test it with the longest card title and actual content. - A background image has an unexpected crop. Check the element’s dimensions, then tune
background-position. Usecontainif showing the whole background matters more than filling the box. - The image is missing or has no useful text alternative. Verify the
srcpoints to a loadable asset. For meaningful images, write contextualalttext; for purely decorative images, use an empty alt attribute.
Check the finished cards at real sizes
- Load the page with the actual images and card text, not just a blank placeholder.
- Resize the viewport until the grid changes its column count; confirm cards still have usable widths and the content does not overflow.
- Inspect each crop in its narrow and wide states. Move
object-positionwhere necessary or choose a different fit. - Check that meaningful images have appropriate alternative text and decorative images do not repeat adjacent content.
- Test long headings, missing image assets, and images with unusually wide or tall source ratios.
Or skip the browser setup
If you need a screenshot of the page while checking a card layout, ScreenshotNeo can capture a URL with one request. Its API and parameters are documented at ScreenshotNeo documentation.
curl -G "https://api.screenshotneo.com/v1/shot"
-d access_key=YOUR_API_KEY
--data-urlencode url=https://example.com
-o shot.webpScreenshotNeo accepts cookie or consent banners like a visitor and removes more than 60 known consent platforms, newsletter popups, and chat widgets before capture; each cleanup step can be turned off. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits cost nothing, with response headers indicating the page verdict and billing status. Its MCP server includes take_screenshot, get_page_info, and capture_pdf for AI agents. The free plan includes 1,000 screenshots per month without a card; paid plans start at $5 for 3,000 shots. See ScreenshotNeo for service details, or create a free account to get 1,000 screenshots a month with no card.
Frequently Asked Questions
Can I use an image card without a fixed image height?
Yes. The image can retain its natural dimensions, but cards with sources of different proportions may then have different image heights. Use a shared height or aspect ratio only when consistent frames are part of the design.
Does CSS Grid determine whether the image is cropped?
No. Grid controls layout and track sizing. The image element’s frame and its object-fit rule determine whether the source is cropped, letterboxed, or distorted.
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.
