必须加 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悬停就变成左上角固定、其余部分往外伸完全不是“居中放大裁剪”效果。使用场景卡片式图库、头像悬停、商品图预览立即学习“前端免费学习笔记深入” 幻导航网 发现优质实用网站,开启网络探索之旅