Foundations

Card image aspect ratios

Which image shape should cards use — square, or something wider? Below: a live test of the same image at every ratio, the three real use cases compared side by side, and a decision framework that makes the choice repeatable.

The short answer

Square (1:1) is not the universal best — it's the right call for people and uniform thumbnails, but it crops editorial photos badly and makes lists tall. The system should be flexibly constrained: a small fixed set of ratios, with one chosen per card type by a simple rule — never an arbitrary value, and never mixed within a single grid.

Why this page exists. Cards currently crop images three different ways — card.css uses fixed pixel heights (height:12rem, so the crop changes with viewport width), blog-listing.css uses aspect-ratio:16/9, and image-embed.css has its own ratio classes. This standardises all three on one intrinsic-ratio approach.

Two rules underpin everything below:

  • Reserve the space with aspect-ratio, fill it with object-fit: cover. The image scales proportionally with the card, never distorts, and reserves layout space (no content shift while loading).
  • One ratio per grid. Equal card heights are what make a grid read as a grid. Mixing ratios in a row looks broken (see Pitfalls).

See each ratio (same source image)

The identical photo, cropped by object-fit: cover into each standard ratio. Watch how much horizontal context vs. height each one keeps.

Editorial / scene photo

Editorial photo cropped square
1:1Square — loses the scene's width
Editorial photo cropped 4:5
4:5Portrait — wrong for landscapes
Editorial photo cropped 4:3
4:3Balanced, forgiving
Editorial photo cropped 3:2
3:2Photographic
Editorial photo cropped 16:9
16:9Best for editorial

Headshot (square source)

Headshot cropped square
1:1Best for people
Headshot cropped 4:5
4:5Flattering editorial portrait
Headshot cropped 4:3
4:3Unacceptable — too wide, crops the head
Headshot cropped 3:2
3:2Unacceptable — crops the head
Headshot cropped 16:9
16:9Unacceptable — crops the face

Takeaway: the right ratio depends on the subject. Wide ratios keep scenes; square/portrait keep faces. A headshot in 16:9 literally cuts the head off; an editorial scene in 1:1 throws away the story.

Use case 1 — Blog listings

Editorial featured images. The web convention (and the shape of the social/OG image these articles already generate) is wide. 16:9 reads as "article" and keeps lists compact; square crops the photography and makes the list taller.

16:9 recommended

Insights

Why DB plans win talent

Research

The retirement gap in 2026

News

DBplus reaches 100k members

1:1 comparison

Insights

Why DB plans win talent

Research

The retirement gap in 2026

News

DBplus reaches 100k members

Use case 2 — Leadership bios

Headshots are the subject. Square is the team-grid standard — consistent, compact, works at small sizes. 4:5 is more flattering and editorial when there's room. Either way, set the focal point to the top so the face stays centred (.caat-card-image--face).

1:1 recommended

Margaret Chen

Chief Investment Officer

David Okafor

VP, Member Services

Priya Sharma

Head of Plan Design

4:5 editorial variant

Margaret Chen

Chief Investment Officer

David Okafor

VP, Member Services

Priya Sharma

Head of Plan Design

Use case 3 — Resource call-outs & section links

Navigational tiles linking to sections, with mixed/illustrative imagery. Equal visual weight matters more than editorial framing. 4:3 is the forgiving middle for a multi-up grid; 16:9 suits wide 1–2-up feature tiles.

Fixed or flexible?

Flexible — but constrained. Authors and developers pick from a fixed set of five ratios; they cannot enter arbitrary values. This keeps every grid aligned and the system coherent while still letting each card type use the shape that suits its subject.

RatioShapeUse it forAvoid for
1:1SquarePeople, avatars, uniform thumbnails, dense gridsWide editorial scenes
4:5PortraitEditorial headshots/bios with room; postersLandscapes; tall lists
4:3Soft landscapeMixed/unknown content, resource tiles — the forgiving defaultHeadshots; cinematic hero imagery
3:2PhotographicEditorial photography, native-camera imagesHeadshots; very dense thumbnail grids
16:9WideBlog/article cards, video thumbnails, wide feature tilesHeadshots (crops the face)

Decision framework

Four questions, in order. They resolve to a single ratio for any card type.

1

What is the subject?

A person → 1:1 (standard) or 4:5 (editorial).  An editorial scene / article → 16:9 or 3:2.  Mixed / illustrative / unknown → 4:3.

2

How dense is the grid?

Narrow columns / many-up → lean squarer (1:1, 4:3) so cards don't get too short. Wide columns / 1–2-up / featured → lean wider (16:9, 3:2).

3

Apply the consistency rule.

One ratio per grid — no exceptions. If two card types share a row, they share a ratio. Pick the ratio for the grid, not the individual card.

4

Set the crop & reserve space.

Always object-fit: cover + aspect-ratio (no distortion, no layout shift). For faces, push the focal point up (.caat-card-image--face). On mobile, if a wide ratio gets too short, switch the whole grid to a softer ratio at the breakpoint — never individual cards.

The standard

Use caseStandard ratioClassNotes
Blog listing (grid & featured)16:9.caat-card-image--16-9Matches the article's social/OG image; compact lists
Leadership bios (team grid)1:1.caat-card-image--1-1 .caat-card-image--face4:5 as an editorial variant
Resource call-outs (multi-up)4:3.caat-card-image--4-3Forgiving for mixed imagery
Resource / feature (1–2-up wide)16:9.caat-card-image--16-9When tiles are wide

The same five ratios exist on the Image / Embed component (.caat-image--1-1 … --16-9) and on card images (.caat-card-image--*). A ratio modifier is required — the legacy fixed-height classes (.tall/.compact) have been removed.

<!-- Blog card — 16:9 -->
<article class="caat-card">
  <img class="caat-card-image caat-card-image--16-9" src="…" alt="…">
  <div class="card-body">…</div>
</article>

<!-- Leadership bio — 1:1, face-centred -->
<img class="caat-card-image caat-card-image--1-1 caat-card-image--face" src="…" alt="…">

Pitfalls

Mixed ratios in one grid — the cards no longer align and the row looks broken:

16:9 card

1:1 card

4:5 card

  • Don't use fixed pixel heights for responsive cards — the crop ratio drifts with viewport width. Use a ratio modifier.
  • Don't put a headshot in 16:9 or a landscape in 1:1 — match the ratio to the subject.
  • Don't let object-fit default to fill — it distorts. Always cover.
  • Don't forget alt text, and keep a neutral background on the frame for slow-loading images.