Use object-contain for box art to prevent cropping
Wrap the box art img in a div with the game color as background and switch from object-cover to object-contain. This shows the full box art without cropping, especially important for the taller Switch-era cases. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -23,12 +23,14 @@ export function GameCard({ game, selected, onSelect }: GameCardProps) {
|
||||
}`}
|
||||
>
|
||||
{imgIdx < boxArtSrcs.length ? (
|
||||
<img
|
||||
src={boxArtSrcs[imgIdx]}
|
||||
alt={game.name}
|
||||
className="w-full h-48 object-cover"
|
||||
onError={() => setImgIdx((i) => i + 1)}
|
||||
/>
|
||||
<div className="w-full h-48" style={{ backgroundColor }}>
|
||||
<img
|
||||
src={boxArtSrcs[imgIdx]}
|
||||
alt={game.name}
|
||||
className="w-full h-full object-contain"
|
||||
onError={() => setImgIdx((i) => i + 1)}
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<div
|
||||
className="w-full h-48 flex items-center justify-center"
|
||||
|
||||
Reference in New Issue
Block a user