必须设置transform-origin: center使图片居中等比放大，配合overflow: hidden防溢出、display: block去基线留白、max-width: 100%保响应式，并用transition: transform 0.2s ease实现平滑悬停放大。
图片悬停放大时保持宽高比不拉伸
直接用 transform: scale() 而不是改 width/height，否则容易变形。关键是要让缩放以图片中心为原点，且容器预留足够空间避免被裁切。
- 给图片父容器设
overflow: hidden，防止放大后溢出干扰布局 - 图片本身加
transition: transform 0.2s ease，避免突兀跳变 - 必须设置
transform-origin: center，否则默认从左上角缩放，视觉偏移明显 - 推荐用
max-width: 100%控制原始尺寸，而不是固定像素值，适配响应式场景
用 CSS 实现无 JS 的纯 hover 放大预览
不需要引入 JavaScript，纯 CSS 就能完成基础悬停放大。但要注意触发区域和层级问题——比如图片在卡片内，hover 应该作用于卡片整体，而非仅图片本身。
- 把
:hover写在父容器（如<div class="img-preview">）上，再通过后代选择器控制内部<img> - 图片需设
display: block，避免底部默认留白（由 inline 元素基线导致） - 若要放大后轻微浮起，可叠加
z-index: 1和box-shadow，但注意父容器得是position: relative - 移动端 Safari 对
:hover支持不稳定，首次点击才触发，生产环境建议加@media (hover: hover)媒体查询做隔离
放大后显示半透明遮罩与提示文字
单纯放大不够直观，加一层带文字的遮罩能明确提示“这是预览”。遮罩必须和图片共用同一容器，否则 transform 不会同步影响它。
- 遮罩用伪元素
::after或同级<div>，设position: absolute并覆盖全图 - 初始状态设
opacity: 0，hover 时连同图片一起opacity: 1+transform: scale(1.1) - 文字颜色建议用
color: white搭配text-shadow: 0 1px 2px rgba(0,0,0,0.5)，确保在任意背景图上都可读 - 遮罩的
pointer-events: none可选，避免遮罩拦截鼠标事件；如果需要点击遮罩触发操作，则改为pointer-events: auto
多图网格中 hover 放大不引发其他项重排
常见错误是给图片设 position: relative 后用 top/left 移动，结果相邻元素跟着位移。正确做法是只靠 transform，它不占用文档流。
立即学习“前端免费学习笔记（深入）”；
- 网格容器用
display: grid或flex，子项不用float或position: absolute - 每张图的父容器设
position: relative，只为定位遮罩，不影响布局流 - 放大倍数建议控制在
scale(1.05) ~ scale(1.2)之间，超过 1.3 容易让小图失真或触发浏览器重绘卡顿 - 如果网格项有边框/间距，hover 时别动
margin或padding，只动transform，否则 layout thrashing 风险高
transform 在低版本 Android WebView 中的兼容性，以及 will-change: transform 的滥用——它本意是提示浏览器提前优化，但加在大量图片上反而拖慢渲染。真要用，只加在明确高频交互的单个容器上。 
