图片悬停放大被裁剪需容器设固定宽高和overflow: hidden，并显式声明transform: scale(1)、display: block及transform-origin: center，否则缩放会偏移、模糊或闪跳。
图片悬停放大时内容被裁剪，overflow 不生效？
直接给图片容器加 overflow: hidden 是对的，但很多人漏掉了关键前提：容器必须有明确宽高，且图片不能脱离文档流。如果用 img 直接设 transform: scale(1.2)，它会撑出容器边界，overflow: hidden 就形同虚设——因为默认情况下 transform 不触发层叠上下文，裁剪行为不会作用于子元素。
实操建议：
- 用包裹容器（如
<div class="img-wrap">）设定固定 <code>width和height，再设overflow: hidden - 把
img设为display: block，避免底部留白干扰尺寸计算 - 在容器上添加
transform-style: preserve-3d或触发层叠上下文（如will-change: transform），确保缩放被正确裁剪 - 统一设
transform-origin: center在容器或img上，避免偏移 - 加
image-rendering: -webkit-optimize-contrast（Safari）和image-rendering: crisp-edges（部分场景防模糊） - 慎用小数缩放（如
scale(1.15)），优先选1.2、1.25等易被像素对齐的值 - 初始状态必须显式声明
transform: scale(1)，不能依赖默认 - 把
transition写在容器上（而非img），并加上will-change: transform提前提示合成层 - 避免同时过渡
width/height—— 这会触发重排，比transform慢一个数量级
transform: scale() 放大后位置偏移、边缘锯齿？
单纯写 scale(1.2) 会让图片以左上角为原点放大，导致“往右下跑”。更自然的效果是中心放大，得配合 transform-origin: center。另外，Chrome/Firefox 对非整数缩放的渲染可能发虚，尤其在 Retina 屏上。
实操建议：
需要过渡动画但鼠标快速进出时卡顿或闪跳？
这是 transform 和 transition 配合不当的典型表现。如果只给 img 加 transition: transform 0.3s，而没给初始态设 transform: scale(1)，浏览器会从无到有计算过渡，首次悬停就容易抽搐。
实操建议：
最简可靠结构就三行核心样式：.img-wrap { overflow: hidden; width: 300px; height: 200px; }，.img-wrap img { display: block; transform: scale(1); transition: transform 0.3s ease; }，.img-wrap:hover img { transform: scale(1.2); transform-origin: center; }。别小看 display: block 和显式 scale(1)，漏掉任一，都可能让效果在某些设备上完全失效。
