必须同时设置 transform-origin: center、overflow: hidden（作用于直接父容器）、transition: transform 0.3s ease（声明在初始状态）及 transform: scale(1) 才能实现稳定居中缩放。
直接用 transform: scale() 就能实现，但只写这一句必出问题——溢出、跳动、模糊、移动端失效，全是因为漏了关键配套规则。
为什么图片悬停后会“突然滑出”或“切掉边缘”
根本不是 scale() 本身的问题，而是缩放原点没对齐。默认 transform-origin: 0 0（左上角），放大时右下部分直接撑出去。浏览器不会自动帮你居中裁剪。
- 必须显式加
transform-origin: center，和overflow: hidden配合才真正居中缩放 - 如果图片用了
object-fit: cover，transform-origin: center才能匹配实际图像中心；若用width: 100%; height: 100%且容器有padding，原点可能偏移，得看 computed styles 确认真实值 - 别写
transform-origin: left top—— 它在 Safari 和旧版 Chrome 中解析不稳定，等价性不如0 0
父容器 overflow: hidden 加在哪才有效
必须加在「直接包裹 <img> 的那一层元素」上，加错层级等于没加。
- ✅ 正确：
<div class="img-wrap"><img></div>→.img-wrap { overflow: hidden; width: 300px; height: 200px; } - ❌ 错误：
.gallery { overflow: hidden; }—— 即使所有.img-wrap都在里面，也不起作用 - ⚠️ 注意：
height: auto或靠内容撑高的容器，overflow: hidden在部分安卓 WebView 中不触发裁剪，必须设明确宽高或aspect-ratio
transition 写在哪儿、怎么写才不卡顿
过渡声明必须落在初始状态，不是 :hover 里；而且只能过渡 transform 和 opacity 这两个能走 GPU 合成的属性。
- 初始样式必须带
transform: scale(1)，否则首次 hover 会闪一下（Safari 尤其明显） - 写成
transition: transform 0.3s ease，绝不能写transition: all 0.3s—— 后者会让 color、margin 等变化也参与过渡，拖慢帧率 - 性能敏感场景可加
will-change: transform，但仅限目标<img>元素，别在父容器上滥用 - 更兼容的硬件加速写法是
transform: scale(1) translateZ(0)，translateZ(0)要写在默认状态，不是 hover 里
移动端点击后放大一闪就消失，怎么稳住
iOS 和多数安卓浏览器没有持续 hover 状态，:hover 只是模拟一次点击激活，不是真正的悬停。
- 用媒体查询隔离：
@media (hover: hover) and (pointer: fine) { .img-wrap:hover img { transform: scale(1.2); } } - 关键交互别依赖 hover：商品图预览、相册大图等，该用
touchstart+classList.toggle("is-hovered")控制 - 降级方案可用
:active，但只在按住时生效，松开即恢复，体验有限 - 别给
<img>设touch-action: manipulation试图“修复” hover —— 它只减少延迟，不解决无 hover 的本质
真正难的不是写出 scale(1.2)，而是理解 overflow: hidden 是裁剪锚点、transform-origin 必须和 object-fit 对齐、transition 必须声明在起点——少一个，效果就从“丝滑”变成“抽搐”。
