ui(thumbnails): force preview images to fixed ratio

Use object-fill for compact preview thumbnails so rank-list covers and
file previews fill their fixed boxes without cropping or black bars. This
keeps the list layout stable while matching the desired compressed-ratio
thumbnail treatment.
This commit is contained in:
TerryM
2026-05-30 02:51:09 +08:00
parent 609c119277
commit ea38503f37
2 changed files with 9 additions and 21 deletions

View File

@@ -132,26 +132,14 @@ function PopularRankRow({
}`} }`}
> >
{cover ? ( {cover ? (
<> <img
{/* Same image, blurred + scaled, fills the letterbox area so we src={cover}
see the full poster (no crop) without dead black bars. */} alt=""
<img loading="lazy"
src={cover} decoding="async"
alt="" className="h-full w-full object-fill"
aria-hidden onError={() => setCoverFailed(true)}
loading="lazy" />
decoding="async"
className="absolute inset-0 h-full w-full scale-110 object-cover opacity-70 blur-md"
/>
<img
src={cover}
alt=""
loading="lazy"
decoding="async"
className="relative h-full w-full object-contain"
onError={() => setCoverFailed(true)}
/>
</>
) : ( ) : (
<FallbackCover type={r.type} /> <FallbackCover type={r.type} />
)} )}

View File

@@ -47,7 +47,7 @@ function AttachmentRow({ postId, att }: { postId: string; att: Attachment }) {
loading="lazy" loading="lazy"
decoding="async" decoding="async"
onError={() => setPreviewFailed(true)} onError={() => setPreviewFailed(true)}
className="h-16 w-16 shrink-0 rounded-lg bg-[#111116] object-contain" className="h-16 w-16 shrink-0 rounded-lg object-fill"
/> />
) : ( ) : (
<div <div