CSS如何实现图片悬停时的缩放裁剪效果_利用transform与overflow

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