必须加 overflow: hidden 且父容器设 position: relative，否则 transform: scale() 会导致图片溢出；需显式设置 transform-origin: center 并确保容器有明确宽高，图片用 display: block 避免留白。
图片悬停缩放时边缘被裁掉，必须加 overflow: hidden
不加这个，transform: scale() 一动，图片直接撑出容器，悬停时看到的是整张图平移或溢出，不是“居中缩放裁剪”。父容器得是相对定位（position: relative），否则 overflow: hidden 在某些旧版 Safari 里会失效。
常见错误现象：
– 悬停后图片往左上角偏移，右下部分消失
– 缩放时整个容器被撑大，布局抖动
– Chrome 看着正常，Safari 里图片直接跑出边界
- 父容器必须设
overflow: hidden，不能只靠clip-path或mask替代 - 图片本身推荐用
display: block，避免底部默认留白 - 如果父容器宽高是百分比或
fit-content，先确认它有明确尺寸，否则overflow: hidden无效
transform: scale() 要配合 transform-origin: center
默认缩放原点是 transform-origin: 50% 50%，但有些框架或重置样式会改掉它。一旦变成 top left，悬停就变成左上角固定、其余部分往外伸，完全不是“居中放大裁剪”效果。
使用场景：卡片式图库、头像悬停、商品图预览
立即学习“前端免费学习笔记（深入）”；
- 显式写
transform-origin: center更稳妥，别依赖默认值 - 如果图片是
background-image，得用background-size+background-position模拟，不能用transform - 缩放倍数建议控制在
1.1～1.3，超过1.4容易糊（尤其低分辨率图）
缩放抖动？加 will-change: transform 或 backface-visibility: hidden
部分浏览器（尤其是移动端 Chrome 和老版 Edge）对 transform 的合成层判断不准，导致缩放时卡顿或闪烁。这不是性能瓶颈，是渲染管线没提前升层。
性能影响：不加可能触发重排，加了会多占一点内存，但对现代设备几乎无感
- 优先加
backface-visibility: hidden，兼容性更好（IE10+） -
will-change: transform别滥用，只加在真正需要悬停动画的元素上 - 别给父容器加，只加在
<img alt="CSS如何实现图片悬停时的缩放裁剪效果_利用transform与overflow" >标签本身
想兼容 IE？放弃 transform，改用 zoom + overflow
IE10/11 不支持 transform-origin 在 <img alt="CSS如何实现图片悬停时的缩放裁剪效果_利用transform与overflow" > 上生效，scale() 会失效或偏移。这时候只能降级：用 IE 专属的 zoom，配合 overflow: hidden 和负 margin 微调位置。
错误示例：img:hover { zoom: 1.2; } → 图片放大但不居中，右边被切
- 必须搭配
margin: -10% 0 0 -10%类似手动纠偏（具体值看缩放比例） - 加
*zoom: 1.2（星号 hack）可只作用于 IE7–8，但已基本不用考虑 - 现在大多数项目可直接放弃 IE，但如果要保，CSS 里得单独写
@supports not (transform: scale(1))做回退
width: 300px 却让图片自己撑高，这时 overflow: hidden 会失效，缩放效果完全不可控。 
