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:
parent
a236963926
commit
5a477e31a2
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue