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 ? (
<>
{/* Same image, blurred + scaled, fills the letterbox area so we
see the full poster (no crop) without dead black bars. */}
<img
src={cover}
alt=""
aria-hidden
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)}
/>
</>
<img
src={cover}
alt=""
loading="lazy"
decoding="async"
className="h-full w-full object-fill"
onError={() => setCoverFailed(true)}
/>
) : (
<FallbackCover type={r.type} />
)}

View File

@@ -47,7 +47,7 @@ function AttachmentRow({ postId, att }: { postId: string; att: Attachment }) {
loading="lazy"
decoding="async"
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