jeffemmett
/
katheryn-website
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
cynthia-poetry/src/app/page.tsx
View File

@ -110,12 +110,13 @@ export default function HomePage() {
<div className="grid md:grid-cols-2 gap-12"> <div className="grid md:grid-cols-2 gap-12">
{books.map((book) => ( {books.map((book) => (
<div key={book.title} className="flex flex-col items-center text-center"> <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 <Image
src={book.coverImage} src={book.coverImage}
alt={`${book.title} by ${book.author} — book cover`} alt={`${book.title} by ${book.author} — book cover`}
fill width={224}
className="object-cover" height={346}
className="w-full h-auto rounded-sm shadow-md"
sizes="(max-width: 768px) 192px, 224px" sizes="(max-width: 768px) 192px, 224px"
/> />
</div> </div>