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:
@@ -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} />
|
||||||
)}
|
)}
|
||||||
|
|||||||
@@ -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
|
||||||
|
|||||||
Reference in New Issue
Block a user