真正可用的大图预览方案是替换高清图而非拉伸缩略图：用缩略图+隐藏高清图+hover显隐，配合relative/absolute定位与opacity/visibility过渡；移动端需button+focus-within或JS支持。
hover 时用 CSS 控制 img 的 transform: scale() 会失真
直接放大缩略图本身（比如给 <img> 加 transform: scale(2)）看似简单，但实际会拉伸像素、模糊边缘，尤其对小图或带文字的图标更明显。这不是“预览大图”，只是放大了原图——分辨率没变，细节没增加。
真正可用的方案是：准备一张高分辨率原图，悬停时显示它，并控制尺寸和定位。关键在「替换」而非「拉伸」。
- 缩略图用低清图（如
thumb.jpg），width/height设为固定值（如120px） - 大图用高清图（如
full.jpg），不设宽高，靠容器约束 - 用
position: relative包裹缩略图，让大图能绝对定位到它旁边/下方
用 title 属性无法自定义样式或控制尺寸
title 是浏览器原生提示，只支持纯文本，不能加图片、不能设宽高、不能加阴影或圆角，移动端还经常不触发。它不是“大图预览”的解决方案，只是临时信息补充。
想实现可控的大图浮层，必须用额外 DOM 元素 + CSS 显示隐藏逻辑：
立即学习“前端免费学习笔记（深入）”；
- 在缩略图外层包裹一个
<div class="preview-container"> - 内部放缩略图 + 隐藏的
<img class="big-preview"> - 用
:hover .big-preview { opacity: 1; visibility: visible; }控制显隐 - 避免用
display: none切换，否则 CSS 过渡无效；改用opacity+visibility
JavaScript 不是必须的，但需处理多个缩略图共存时的定位冲突
纯 CSS 方案在单个缩略图时很稳，但多个并排时，所有大图默认会叠在同一个位置（比如都相对父容器左上角）。这时需要为每个缩略图单独控制浮层位置。
最轻量的做法是：让每个 .big-preview 绝对定位在对应缩略图右下角，用 transform: translate() 微调：
.preview-container {
position: relative;
display: inline-block;
}
.preview-container .big-preview {
position: absolute;
top: 100%;
left: 0;
margin-top: 8px;
max-width: 300px;
opacity: 0;
visibility: hidden;
transition: opacity 0.2s, visibility 0.2s;
}
.preview-container:hover .big-preview {
opacity: 1;
visibility: visible;
}
如果缩略图在右侧边缘，大图可能溢出视口——这时就得用 JS 检测 getBoundingClientRect() 并动态切位置（比如改 left: auto; right: 0;），但多数场景下用 max-width + margin-left 微调已够用。
移动端 hover 失效，得补点击/触摸逻辑
iOS 和 Android 默认不触发 :hover，缩略图点一下才显示，再点一下才隐藏——这不符合直觉。解决思路不是强行模拟 hover，而是用 :focus-within 或加一层 <button> 包裹：
- 把缩略图包进
<button type="button">，按钮设position: relative - 大图放在按钮内部，用
button:focus-within .big-preview触发显示 - 同时加
tabindex="0"确保键盘可聚焦，兼顾可访问性 - 注意：iOS Safari 对
:focus-within支持良好，Android Chrome 也已支持，无需 polyfill
复杂点在于，用户可能希望“点开大图后进入新页面”或“弹出模态框”，这时候就该放弃纯 CSS，用 JS 绑定 click 并加载真实大图 URL——但那是另一个需求了。
