[plainprogrammer]

Card images are now always shown whole and in their own proportions, in tiles, on the card page and in the table thumbnail. Closes #35.

Why

Scryfall's image guidelines say not to crop, clip or stretch card images (research 016, sections 4 and 7). The exported design system fitted tile and card page images with object-fit: cover, which crops whenever an image isn't exactly 63:88, and the table thumbnail had no fitting rule, so it stretched its image. Measured in the suite's browser before the fix, a Scryfall-sized image (488×680) lost 0.19px from each side in a tile and was drawn 1.67% too tall in the thumbnail.

What changed

• One block in collector/additions.css (Image fit (spec 019)), three rules:
  • tiles and the card page use contain, so the whole image sits inside its 63:88 slot and any leftover shows surface-sunken;
  • the thumbnail's image takes its height from 63:88 of its 24px width (24×33.52, the empty thumbnail's size, where it was 24×34) and uses contain;
  • the card page's slot is positioned, so a face's missing-image fallback stays in its own slot. Before, it was placed against the whole image column and, for a card with one face's image missing, lay over the other face's image.
• components.css and tokens.css are untouched. The override lives in additions.css, which a re-export doesn't replace, and is documented as the ImageFit pattern (docs/design-system/components/ImageFit.md, one README line) for upstreaming.
• No view changes.
• 14 new examples. Eleven run in headless Firefox with pictures that are deliberately not 63:88 and read back where the browser paints them; they fail if a re-export brings cropping or stretching back. Test pictures arrive as data: addresses, so the suite's browser asks no catalog source for anything.

One visible side effect: a table row with an image is half a pixel shorter (53px to 52.52px), so it now matches a row without one.

Documents

• Spec (v1.3.0)
• Plan
• Verification: each criterion and the example that holds it, the thumbnail measured before and after, and the review's result

Checks

• bin/ci on this commit: 453 files with no RuboCop offenses, 0 Brakeman warnings, 1133 examples, 0 failures, 1 pending (the pending example needs COLLECTOR_ART_AGREEMENT).
• A read-only implementation review against the spec returned spec-aligned.

Still owed

• Phone check (WebKit). On your phone, from a dev server on this branch, open the collection grid, the table and a card page, and confirm the images are whole and the thumbnails aren't stretched. Real Scryfall images are within 0.3% of 63:88, so this checks that nothing regressed rather than showing a visible difference.
• Session wrap for this branch.

Not asserted by any example: a failed image's alternative text, which is the browser's own rendering.

Out of scope

• The 45% fade on tiles for cards you don't own is Decide whether fading unowned card tiles fits Scryfall's image guidelines #65.
• Upstreaming ImageFit and the earlier app additions into the published design system.

Merging alongside the spec 018 PR

Spec 018 (#34) edits the same three files: collector/additions.css, docs/design-system/README.md and spec/design_system_files_spec.rb. This PR's CSS block is mid-file and its examples are in a describe of their own, to keep the overlap small. Whichever PR merges second should still expect conflicts on adjacent lines, most likely the new README line and the end of the spec file. Keep both sides, with the README lines in spec order.

Screenshots

The pictures are test images that are deliberately square, tall and wide, so the fit is visible.

Collection grid, 1280px

Collection table, 1280px

Card page, 1280px

At 390px

Grid, light	Grid, dark	Table, light	Table, dark

Card page, light	Card page, dark

🤖 Generated with Claude Code