fix: 2图相册按真实比例+缩放贴合,竖图不再被裁
- albumLayout: 2 图不再 clamp 比例,格子按图片真实比例,避免下限 0.55 把竖图 当矮图导致裁顶;3+ 张马赛克仍 clamp 保持整齐 - AlbumBubble: 2 图改用 object-contain,整图缩放贴合框内,永不裁剪;高度上限 不变,不占用过多空间 Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -26,6 +26,12 @@ export function AlbumBubble({ post }: { post: Post }) {
|
||||
const ratios = useImageRatios(visible, sources);
|
||||
const layout = computeAlbumLayout(ratios);
|
||||
|
||||
// Two-image albums scale each image to fit its cell (object-contain) so a
|
||||
// tall poster is never cropped — the cell already matches the image ratio, so
|
||||
// there are no bars except on very wide screens where the height is capped.
|
||||
// 3+ images keep object-cover to stay a tidy mosaic.
|
||||
const imgFit = visible.length === 2 ? "object-contain" : "object-cover";
|
||||
|
||||
return (
|
||||
<div className="flex flex-col">
|
||||
{/* aspect-ratio sets a definite box height; tiles are absolutely
|
||||
@@ -67,7 +73,7 @@ export function AlbumBubble({ post }: { post: Post }) {
|
||||
src={sources[i]}
|
||||
fallbackSrc={[att.thumbUrl, att.url]}
|
||||
loading="lazy"
|
||||
className="h-full w-full object-cover transition duration-300 group-hover:scale-[1.03]"
|
||||
className={`h-full w-full ${imgFit} transition duration-300 group-hover:scale-[1.03]`}
|
||||
/>
|
||||
{isLastSlot ? (
|
||||
<div className="absolute inset-0 flex flex-col items-center justify-center gap-0.5 bg-black/60 text-white backdrop-blur-[1px] transition group-hover:bg-black/50">
|
||||
|
||||
Reference in New Issue
Block a user