图片支持全屏预览
广告
{{v.name}}
📋 原始需求(task.md):

picture_admin.html的右侧的缩略图要支持点击预览,预览区域是全屏的半透明黑色蒙版,在蒙版上方显示图片,下方显示图片的文件名和日期,图片的宽高不超过视口宽高的80%,并且保持图片的宽高比,点击蒙版右上角的x图标关闭预览。

问题分析

右侧缩略图仅作展示,没有预览交互;需要全屏蒙版查看大图,并展示文件名与上传日期,同时限制尺寸且保持宽高比。


解决方案

增加 preview 状态与全屏半透明黑色蒙版:点击缩略图打开预览;图片 max-width/max-height 为 80vw/80vh 且 object-fit:contain;下方显示文件名与日期;右上角 × 关闭(也可点蒙版空白处关闭)。

友链