localadministrator/avbeat-com
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ui(cards): object-contain on article-card images so portraits don't crop

Browse Source 
Boxes stay sized; tall/odd-ratio images letterbox cleanly against the
existing slate card background instead of being chopped at the edges.
Applied to FeaturedBento, FeaturedBentoFromDb, ArticleFeed, NewsPageClient,
SpotlightCarousel, FeaturedCarousel, AISuggestedArticles, search/page.tsx.

Avatars (rounded-full) unchanged — still object-cover.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
ops-bot
2026-06-04 15:08:50 +00:00
parent bc49c676c3
commit e84f69f241
8 changed files with 11 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/home-page/components/ArticleFeed.tsx
View File

@@ -581,7 +581,7 @@ export default function ArticleFeed() {
alt={article?.alt}
width={190}
height={128}
className="object-cover w-full h-full"
className="object-contain w-full h-full"
sizes="(max-width: 640px) 100px, (max-width: 768px) 140px, 190px"
/>
</Link>

4
src/app/home-page/components/FeaturedBento.tsx
View File

@@ -204,7 +204,7 @@ export default function FeaturedBento() {
src={hero?.image}
alt={hero?.alt}
fill
className="object-cover w-full h-full"
className="object-contain w-full h-full"
priority={true}
sizes="(max-width: 640px) 100vw, (max-width: 1024px) 100vw, 58vw"
/>
@@ -242,7 +242,7 @@ export default function FeaturedBento() {
src={article?.image}
alt={article?.alt}
fill
className="object-cover w-full h-full"
className="object-contain w-full h-full"
sizes="(max-width: 640px) 50vw, (max-width: 1024px) 50vw, 22vw"
/>
<div className="absolute top-0 left-0">

2
src/app/home-page/components/SpotlightCarousel.tsx
View File

@@ -191,7 +191,7 @@ export default function SpotlightCarousel() {
src={item.image}
alt={item.alt}
fill
className="object-cover w-full h-full"
className="object-contain w-full h-full"
sizes="(max-width: 640px) 50vw, (max-width: 768px) 50vw, (max-width: 1024px) 33vw, 25vw"
/>
<div className="absolute top-0 left-0">

2
src/app/news/NewsPageClient.tsx
View File

@@ -266,7 +266,7 @@ export default function NewsPage({
src={article.image || "/assets/images/article-placeholder.jpg"}
alt={article.alt || article.title || "AV Beat article"}
fill
className="object-cover group-hover:scale-105 transition-transform duration-300"
className="object-contain group-hover:scale-105 transition-transform duration-300"
sizes="160px"
/>
</div>

2
src/app/search/page.tsx
View File

@@ -71,7 +71,7 @@ export default async function SearchPage({ searchParams }: SearchPageProps) {
src={article.image || "/assets/images/article-placeholder.jpg"}
alt={article.alt || article.title || "AV Beat article"}
fill
className="object-cover group-hover:scale-105 transition-transform duration-300"
className="object-contain group-hover:scale-105 transition-transform duration-300"
sizes="160px"
/>
</div>

4
src/components/AISuggestedArticles.tsx
View File

@@ -175,7 +175,7 @@ export default function AISuggestedArticles({ variant = 'compact' }: Props) {
src={article.image}
alt={article.alt}
fill
className="object-cover group-hover:scale-105 transition-transform duration-300"
className="object-contain group-hover:scale-105 transition-transform duration-300"
sizes="64px"
/>
</div>
@@ -276,7 +276,7 @@ export default function AISuggestedArticles({ variant = 'compact' }: Props) {
src={article.image}
alt={article.alt}
fill
className="object-cover group-hover:scale-105 transition-transform duration-300"
className="object-contain group-hover:scale-105 transition-transform duration-300"
sizes="(max-width: 768px) 50vw, 25vw"
/>
<div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent" />

4
src/components/FeaturedBentoFromDb.tsx
View File

@@ -95,7 +95,7 @@ export default async function FeaturedBento() {
<img
src={img(hero)}
alt={hero.featured_image_alt || hero.title}
className="w-full h-full object-cover"
className="w-full h-full object-contain"
/>
<div className="absolute inset-0 bg-gradient-to-t from-black via-black/65 to-transparent" />
@@ -146,7 +146,7 @@ export default async function FeaturedBento() {
<img
src={img(r)}
alt={r.featured_image_alt || r.title}
className="w-full h-full object-cover"
className="w-full h-full object-contain"
/>
</div>
<div className="p-3 flex flex-col gap-1 flex-1 min-h-0 overflow-hidden">

2
src/components/FeaturedCarousel.tsx
View File

@@ -57,7 +57,7 @@ export default function FeaturedCarousel({ slides }: { slides: Slide[] }) {
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 rounded border border-[#DCE6F2] bg-[#0b0f17] overflow-hidden">
<div className="relative aspect-[16/10] bg-[#111]">
{s.image ? (
<img src={s.image} alt={s.title} className="w-full h-full object-cover" />
<img src={s.image} alt={s.title} className="w-full h-full object-contain" />
) : (
<div className="w-full h-full flex items-center justify-center text-[#6b7280] font-mono text-xs">
no image