最直接的浏览器原生缩略图方案是仅设 的 width 或 height 属性，配合 loading="lazy"、alt 描述、srcset+sizes 响应式适配及 data-fullsrc 实现点击放大，避免强制宽高、object-fit 破坏比例、max-width 二次压缩等常见错误。
用 <img> 的 width 和 height 属性最直接
浏览器原生支持缩略图，不需要 JS 或额外库。只要给 <img> 设置固定宽高（比如 width="120"），它就会自动等比缩放原图——前提是没加 height 同时又没设 style="max-width:90%" 这类破坏比例的样式。
常见错误现象：<img src="big.jpg" style="max-width:90%" style="max-width:90%"> 强制拉伸变形；或者只设 width 但父容器有 max-width: 100%，导致在小屏下又被二次压缩。
- 推荐只设
width（或只设height），让浏览器保持原始宽高比 - 加
loading="lazy"避免首屏加载大图 - 用
alt描述内容，对可访问性和 SEO 都有帮助
响应式缩略图：用 srcset + sizes 适配不同设备
单张缩略图在手机上可能还是加载了高清原图，浪费带宽。用 srcset 可以让浏览器按屏幕密度和宽度选最合适的尺寸。
使用场景：你有一组预生成的缩略图（如 thumb-120.jpg、thumb-240.jpg、thumb-480.jpg），想让 1x 屏用 120px，2x 屏用 240px，平板用 480px。
@@##@@
注意：sizes 告诉浏览器“这张图在不同断点下会占多宽”，浏览器据此从 srcset 里挑最匹配的资源。如果漏写 sizes，部分浏览器会默认用 100vw，导致选错图。
点击放大：用 data-* 属性存原图地址，轻量实现预览
不需要引入 fancybox 或 lightbox 库。用一个 data-fullsrc 存原图路径，点击时用 JS 换掉预览区的 src 即可。
容易踩的坑：data- 属性值带空格或特殊字符没做 URL 编码，JS 取出来是截断的；或者没加 event.preventDefault() 导致页面跳转。
- HTML 中这样写：
<img src="thumb-120.jpg" srcset="thumb-120.jpg 120w, thumb-240.jpg 240w, thumb-480.jpg 480w" sizes="(max-width: 480px) 100vw, (max-width: 768px) 50vw, 25vw" style="max-width:90%" alt="缩略图示例"> - JS 简单实现：
function showFull(el) { document.getElementById('preview').src = el.dataset.fullsrc; } - 确保
#preview是个独立<img src="thumb.jpg" data-fullsrc="original.jpg" onclick="showFull(this)">，别用<div> 包着再塞 <code>background-image——那样没法右键保存CSS 控制缩略图布局：避免
float和inline-block的间隙问题多个缩略图并排时，用
display: inline-block会因换行符产生 4px 间隙；用float又得清浮动。现代写法直接上display: grid或flex。性能影响：Grid 在老版 Safari（
- 推荐 flex：
.thumbnails { display: flex; flex-wrap: wrap; gap: 8px; } - 每个缩略图加
flex: 0 0 auto防止被压缩 - 别用
vertical-align: top去修 inline-block 间隙——治标不治本，还容易和 line-height 冲突
缩略图真正的复杂点不在尺寸计算，而在资源加载时机和用户交互反馈。比如点击缩略图后，原图还没加载完就显示空白，最好加个 loading 占位或淡入过渡。这些细节不处理，体验就卡在“看起来能用”和“真的顺手”之间。
- 推荐 flex：
