terry-media-adaptive-trial #10

terry · 2026-05-29T16:14:49Z

terry commented

2026-05-29 16:14:49 +00:00

No description provided.

terry added 3 commits 2026-05-29 16:14:50 +00:00

feat: 媒体流图片自适应显示(单图/2图/Telegram式相册) 0035457c6d

- 单图气泡按真实比例显示:横图限高260px、过高裁上下;竖图完整铺满宽度不裁、无黑边
- 2张同类相册:都竖图左右并排、都横图上下堆叠,按比例不裁
- 3+张相册:Telegram式马赛克拼贴(竖主图占左+其余堆右 / 横主图占顶+其余排底)
- 图片比例优先用后端width/height,缺失时从加载后的naturalWidth/Height读取
- 新增 constants/media.ts 统一尺寸规范;albumLayout 纯算法附单测

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

fix: 修复相册底部黑边(grid 用 aspect-ratio 时 fr 行不撑满) 789920d2b9

aspect-ratio 单独作用在 grid 上时,容器高度对 fr 行属"非确定高度",
fr 退化为 max-content,行被压成内容高度,容器底部露出 bg-black。
改为:aspect-ratio + maxHeight 放外层 wrapper,内层 grid 用 absolute
inset-0 撑满,获得确定高度,fr 行正常拉伸,黑边消除。

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

fix: 相册改用绝对定位百分比布局,彻底消除底部黑边 471d29bec9

CSS grid + aspect-ratio 下 fr 行在部分浏览器不撑满,留出 bg-black。
改为 Telegram 同款:算法输出每块 {left,top,width,height} 百分比坐标,
图块绝对定位铺满容器。顺带修复竖主图在左时右侧堆叠图高度算错未填满列。

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

terry added 1 commit 2026-05-29 16:17:42 +00:00

Merge origin/main into terry-media-adaptive-trial ad885f578c

Combine collapsible long-text (main) with adaptive image frame
(this branch). Resolved conflict in ImageWithTextBubble.tsx by
keeping both SingleImageFrame and CollapsibleText imports.

terry merged commit 6249b14096 into main

2026-05-29 16:21:39 +00:00

terry deleted branch terry-media-adaptive-trial

2026-05-29 16:21:40 +00:00

terry referenced this issue from a commit

2026-05-29 16:21:40 +00:00

Merge pull request 'terry-media-adaptive-trial' (#10) from terry-media-adaptive-trial into main

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: terry/Arkie-Library-Frontend#10