应使用transform: scale()配合overflow: hidden容器、display: block图片、transform-origin: center及transition: transform 0.3s ease，避免重排与抖动。
hover 时图片缩放但不破坏布局流
直接写 transform: scale(1.2) 很容易让图片撑开父容器、触发重排，或者和相邻元素打架。关键不是“加动画”，而是“隔离变换空间”。transform 本身不触发重排，但若父容器没设 overflow: hidden，放大后溢出就会暴露问题。
- 给图片外层容器（比如
<div>或<figure>）加上overflow: hidden - 图片自身设
display: block，避免行内元素默认的基线对齐导致跳动 - 缩放用
transform: scale(1.15)而不是1.2——1.15 是视觉上明显又不易糊边的临界值 - 过渡只加在
transform上：transition: transform 0.3s ease，别把width或opacity塞进去，否则会抢帧
同时平移 + 缩放时的位移方向控制
很多人写 transform: scale(1.15) translateX(10px)，结果发现图片往右飘得太多，甚至移出容器。这是因为 translate 的基准是元素自身左上角，而缩放后尺寸变大，同样 10px 在视觉上偏移感更强。更可控的做法是用 translate 配合 transform-origin 锚定中心点。
- 统一设
transform-origin: center，这样缩放和平移都围绕中心发生 - 平移量改用百分比或视口单位：
translateX(-2%)比translateX(8px)更适配不同尺寸图片 - 如果要“向鼠标方向微调”，纯 CSS 无法读取鼠标坐标，此时必须放弃纯 CSS 方案，改用 JS 监听
mousemove动态设置style.transform
移动端 Safari 下 hover 失效怎么办
iOS Safari 默认不支持 :hover 伪类（除非用户点了屏幕一次才临时激活），所以纯 CSS 的 :hover 在 iPhone 上基本不可靠。这不是 bug，是设计选择。
- 不要依赖
:hover做核心交互，比如商品图放大必须可点击才能触发 - 若仍需视觉反馈，可用
:active替代：img:active { transform: scale(1.1); }，但注意它只在触摸瞬间生效 - 真正需要悬停效果的场景（如后台管理界面），建议加一层 JS 判断
matchMedia('(hover: hover)')，仅对支持 hover 的设备启用 CSS 规则
图片模糊或边缘锯齿怎么缓解
缩放后图片发虚，尤其 PNG 或小尺寸 JPG，本质是浏览器用双线性插值拉伸像素。这不是 bug，是渲染策略。
立即学习“前端免费学习笔记（深入）”；
- 加
image-rendering: -webkit-optimize-contrast（Safari）或image-rendering: crisp-edges（Firefox），对图标类图片有效，但可能让照片块状感加重 - 更稳妥的是提前准备高清图：原图宽高至少是显示区域的 2 倍，再用
background-size: cover+background-position: center替代<img>标签 - 避免在
scale(1.3)以上反复悬停切换，GPU 加速虽快，但高频重绘会让低端安卓机发热掉帧
