Your Website's Photo Cards Look Cheap Because They're Forcing Every Image Into the Same Crop

You uploaded decent images. The cards still look rubbish. Before you book a design refresh, check one thing first: is your site forcing every image into the same shape, regardless of what the image actually is?

What the problem looks like

Picture a homepage card grid showing upcoming events, menus, newsletters, and certificates. A portrait poster for a weekend event. A landscape screenshot of a booking confirmation. A square certificate scan. The site doesnt care. It crops every single one into a fixed 16:9 box and calls it done.

What you get: text sliced off the poster, the certificate number hidden behind a hard edge, a date badge shrunk to grey 10-pixel type nobody can read. The cards look amateur, not because the images are bad, but because the container is wrong for them.

We ran into this on a real build. A homepage was pulling in a mix of posters, screenshots, and newsletters and pushing all of them through one fixed crop ratio. Portrait content got squashed. Landscape content got trimmed. The date badge on an event poster, which should have been the first thing a visitor noticed, was rendered as a tiny grey smudge. The fix wasnt a design pass. It was structural: let each image keep its natural proportions instead of forcing a single ratio onto everything.

Once we made that change, readable text stayed readable. The date badge became a bold colour block. Nothing else changed.

Why sites end up this way

Fixed-ratio crops exist for a reason. When every image is a professional product photo shot to spec, a uniform 4:3 or 16:9 grid looks clean and intentional. The problem starts when the images on your site are not shot to spec, because most small business images arent. Menus come from a designer who worked in A4. Event posters are portrait. Screenshots are whatever shape the screen was. Certificates are A4 again. None of these were made with your card grid in mind.

A fixed crop ratio is a bet that all your images will be the same shape. If that bet is wrong, the grid punishes every image that doesnt conform.

Three ways to fix it - and which one to use

Option 1: Re-shoot or re-export everything to match the grid. If you control the images and they are genuinely all the same type, this works. A product catalogue where everything is a physical object is a reasonable candidate. But if your images come from third parties, designers, or event organisers, you dont control the source files and this option isnt available to you.

Option 2: Add smarter crop rules - object-fit and object-position in CSS. object-fit: cover fills the box and trims the edges; object-fit: contain fits the whole image inside the box with empty space around it. You can also hint at which part of the image matters most:

.card-image {
  object-fit: cover;
  object-position: top center; /* keeps the top of a portrait poster visible */
}

This helps at the margins. A portrait poster with the title at the top will survive better. But you are still forcing a shape mismatch; you are just choosing which part gets hidden. For a mix of portrait posters, landscape screenshots, and square certificates, no single object-position value saves all of them.

Option 3: Let the image set its own height. Remove the fixed-ratio constraint entirely. The card expands to fit whatever the image actually is. A portrait poster shows as portrait. A landscape screenshot shows as landscape. Nothing gets cropped.

The structural change is small. Instead of locking the image container to a fixed aspect ratio, you allow the image to define the container height:

.card-image {
  width: 100%;
  height: auto; /* image sets its own height; no crop */
  display: block;
}

The cards in the grid will be different heights. That feels wrong if you have been trained to expect uniform grids. In practice, when the content is genuinely mixed, a grid of different-height cards that are all readable is more useful to a visitor than a grid of uniform cards where half the content is hidden.

Which one to use: if your images are all the same type and you control the source, standardise the export. If they are mixed and you dont control the source, remove the fixed crop and let images breathe. Option 2 is a patch, not a fix - use it only when options 1 and 3 are genuinely off the table.

The quick check you can do right now

Open your site on a desktop browser. Right-click one of the card images and choose “Inspect”. Look for a CSS rule on the image or its container that sets aspect-ratio, a fixed height in pixels, or object-fit: cover. If you find one, thats the constraint. Now look at the images in that grid and ask whether they were all created at that ratio. If they werent, you have found the problem.

No developer needed for the diagnosis. The fix is a different matter, but at least you know what you are fixing.

Why it matters beyond aesthetics

A card grid that hides text looks unfinished. Visitors make a judgement about your business in the first few seconds, and “the date is illegible” or “I cant read the menu” is a reason to leave. That is not a design-taste problem; it is a conversion problem. An enquiry you dont get because a poster was unreadable is real money, not a hypothetical.

Work out your own number: how many people visit those cards in a week, and what is a single enquiry worth to you? Even a small improvement in readability at that point is worth more than the time it takes to fix the CSS.

If you want a second pair of eyes on a specific page - we will look at it, say what is wrong, and tell you whether it is a five-minute fix or something structural - start there.