From cec94e50e28dc42664d32909f97f680924636f3c Mon Sep 17 00:00:00 2001 From: Benjtalkshow Date: Fri, 15 May 2026 10:06:32 +0100 Subject: [PATCH] fix(blog): use object-cover so card and detail covers fill the frame The earlier switch to object-contain was meant to preserve the full image, but it left dark letterbox bands around banners on both the BlogCard grid and the post-details hero. With properly-sized cover banners, object-cover fills the frame without visible cropping. Authors should size cover images for a 2:1 ratio on the card and the responsive heights on the details page. --- components/landing-page/blog/BlogCard.tsx | 2 +- components/landing-page/blog/BlogPostDetails.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/components/landing-page/blog/BlogCard.tsx b/components/landing-page/blog/BlogCard.tsx index ebd44dcc5..9570d2ca1 100644 --- a/components/landing-page/blog/BlogCard.tsx +++ b/components/landing-page/blog/BlogCard.tsx @@ -24,7 +24,7 @@ const BlogCard = ({ post, onCardClick }: BlogCardProps) => { src={post.coverImage} alt={post.title} fill - className='object-contain transition-transform duration-500 group-hover:scale-105' + className='object-cover transition-transform duration-500 group-hover:scale-105' sizes='(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw' /> {/* Gradient Overlay */} diff --git a/components/landing-page/blog/BlogPostDetails.tsx b/components/landing-page/blog/BlogPostDetails.tsx index fe07c03ab..1397c2d0f 100644 --- a/components/landing-page/blog/BlogPostDetails.tsx +++ b/components/landing-page/blog/BlogPostDetails.tsx @@ -140,7 +140,7 @@ const BlogPostDetails: React.FC = ({ src={post.coverImage} alt={post.title} fill - className='rounded-lg object-contain' + className='rounded-lg object-cover' priority sizes='(max-width: 768px) 100vw, (max-width: 1200px) 80vw, 70vw' />