Cardboard · Portfolio grid · Design exploration

Thumbnail crop strategies — same 6 cards, 4 ways

The Portfolio grid renders every card as a portrait tile with object-fit: cover centered on the source photo. Card photography varies wildly card to card — different photographers, borders, holo overlays — so a plain center crop reliably lands on the player's mid-torso (the jersey number) instead of their face. Below, the same 6 sample cards run through 4 candidate crop strategies so the trade-offs are obvious at a glance.

✓

Recommendation

Ship #2 Top-weighted crop (object-position: center 22%) as the grid-wide default, and pair it with #4 Natural card ratio for the Portfolio grid specifically. The player's face, name and set logo sit in the upper third of nearly every trading card ever printed, so nudging the crop anchor upward is a near-universal win — it's a one-line CSS change, adds zero borders, and fixes the "mid-torso" problem immediately. Reserve #3 (full card, letterboxed) as an opt-in "show whole card" toggle, not a default.

1

Current — center crop

The problem
object-fit: cover; object-position: center;

Ships today. Crops to mid-torso — the jersey number — cutting the face off on almost every card.

Wembanyama1
WembanyamaNBA · Spurs
Tatum0
TatumNBA · Celtics
Ohtani17
OhtaniMLB · Dodgers
Mahomes15
MahomesNFL · Chiefs
Bedard98
BedardNHL · Blackhawks
Jokić15
JokićNBA · Nuggets
2

Top-weighted crop

Recommended default
object-fit: cover; object-position: center 22%;

Nudges the crop anchor up. Frames face + name + set logo. One CSS line, zero borders.

Wembanyama1
WembanyamaNBA · Spurs
Tatum0
TatumNBA · Celtics
Ohtani17
OhtaniMLB · Dodgers
Mahomes15
MahomesNFL · Chiefs
Bedard98
BedardNHL · Blackhawks
Jokić15
JokićNBA · Nuggets
3

Full card, letterboxed

Failsafe
object-fit: contain;

On a card-colored padded background. Shows the whole card, guaranteed — but adds visible pillar/letterbox bars around every tile.

Wembanyama1
WembanyamaNBA · Spurs
Tatum0
TatumNBA · Celtics
Ohtani17
OhtaniMLB · Dodgers
Mahomes15
MahomesNFL · Chiefs
Bedard98
BedardNHL · Blackhawks
Jokić15
JokićNBA · Nuggets
4

Natural card ratio

Pair with #2 for Portfolio grid
aspect-ratio: 2.5 / 3.5; object-fit: cover;

Tile matches the real trading-card ratio, so cover crops minimally. Cards look like cards.

Wembanyama1
WembanyamaNBA · Spurs
Tatum0
TatumNBA · Celtics
Ohtani17
OhtaniMLB · Dodgers
Mahomes15
MahomesNFL · Chiefs
Bedard98
BedardNHL · Blackhawks
Jokić15
JokićNBA · Nuggets

Side-by-side summary

StrategyCSSShowsBordersVerdict
1 · Center crop cover / center Mid-torso, jersey number None Ships today — misses the face
2 · Top-weighted crop cover / center 22% Face, name, set logo None Recommended default
3 · Full card, letterboxed contain Entire card, every time Pillar/letterbox bars Failsafe / opt-in only
4 · Natural ratio aspect-ratio: 2.5/3.5 + cover Nearly the full card None Best tile shape for Portfolio grid