Fix book covers: show full images without cropping

Switch from fill+object-cover (crops to aspect ratio) to explicit
width/height so book covers display at their natural proportions.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Jeff Emmett 2026-02-03 11:18:08 +00:00
parent a236963926
commit 5a477e31a2
1 changed files with 4 additions and 3 deletions

View File

@ -110,12 +110,13 @@ export default function HomePage() {
<div className="grid md:grid-cols-2 gap-12">
{books.map((book) => (
<div key={book.title} className="flex flex-col items-center text-center">
<div className="w-48 md:w-56 aspect-[3/4] bg-stone-200 rounded-sm overflow-hidden relative mb-6">
<div className="w-48 md:w-56 mb-6">
<Image
src={book.coverImage}
alt={`${book.title} by ${book.author} — book cover`}
fill
className="object-cover"
width={224}
height={346}
className="w-full h-auto rounded-sm shadow-md"
sizes="(max-width: 768px) 192px, 224px"
/>
</div>