图片悬停后往右下“跑”是因为scale()默认以左上角为缩放原点，必须设transform-origin: center；溢出需在直接父容器加overflow: hidden并设明确宽高；移动端:hover基本失效，应兼容:active或改用JS。
直接用 transform: scale() 配合 transition 就能实现，但不加约束会偏移、溢出、闪动，甚至在移动端完全失效。
为什么图片悬停后往右下“跑”？
因为 scale() 默认以元素左上角为缩放原点。放大时，右下角被拉得更远，视觉上就是图片“移位”。
- 必须显式写
transform-origin: center，让缩放中心落在图片正中 - 如果父容器是
inline-block且没设vertical-align，底部可能有空白导致跳动 → 改成vertical-align: top - 别依赖浏览器默认值，哪怕文档说“center 是默认”，实际在 flex/grid 容器里行为不一致
放大后图片撑破容器或出现滚动条？
这是 overflow 没关严的典型表现。缩放后的图片尺寸变大，若父容器不限制裁剪，就会外溢。
- 给图片的直接父容器（比如
.product-image）加overflow: hidden - 该容器必须有明确宽高（
width/height或aspect-ratio），否则overflow: hidden在某些布局中无效 - 不要只给
<img alt="在商品展示页中如何用CSS制作图片鼠标悬浮放大特效？" >加max-width: 100%——scale(1.2)会突破它，反而造成模糊或错位
移动端点击没反应，iOS 上悬停失效？
iOS Safari 和 Android Chrome 默认不触发 :hover，纯 CSS 悬停在触屏设备上基本形同虚设。
立即学习“前端免费学习笔记（深入）”；
- 别用
@media (hover: hover)做判断——它在 iOS 上返回true，但实际不生效 - 更可靠的做法：同时写
:hover和:active，让触摸时短暂触发（.product-image img:active { transform: scale(1.2); }） - 若需稳定交互，放弃悬停逻辑，改用 JS 监听
click或touchstart，切换.zoomed类 - 旧版 Safari（iOS 12 及更早）仍需
-webkit-transform前缀，别省
放大倍数和过渡时间怎么选才不突兀？
1.1–1.25 倍最安全；超过 1.3 容易暴露原图分辨率不足，边缘发虚。
- 过渡时间控制在
0.2s–0.35s，太短像瞬移，太长让用户等待 - 用
ease-out或cubic-bezier(0.22, 0.61, 0.36, 1)，比默认ease更自然 - 只过渡
transform，别写transition: all—— 会意外触发重绘，尤其在高 DPR 屏幕上边缘模糊更明显
真正难调的不是代码，而是原图尺寸与容器比例是否匹配：放大后裁掉哪块、是否要保留边框留白、DPR 2x/3x 下像素对齐是否干净——这些没法靠 CSS 自动修复，得从资源准备阶段就定好规则。
