必须加在<img>的直接父容器上，且该容器需显式设置宽高、overflow: hidden，并设img为display: block；同时transform-origin: center和transition: transform缺一不可。
为什么直接写 transform: scale(1.2) 一定会出框
因为 scale() 默认以元素左上角为缩放原点，图片放大后右下部分必然溢出；更关键的是，<img> 是替换元素，自身不响应 overflow: hidden，所以光给图片加这个样式完全无效。真正起作用的裁剪必须落在它的**直接父容器**上。
overflow: hidden 必须加在哪个容器上
必须加在 <img> 的**直接父元素**（比如一个 <div class="img-wrapper">），且该容器需满足三个条件：
- 显式设置宽高（不能是
height: auto或靠内容撑开） - 设
overflow: hidden - 内部
<img>设display: block（消除行内默认留白）
❌ 错误写法：.gallery { overflow: hidden; } —— 即使所有图片都在里面，也不裁剪；✅ 正确结构：<div class="img-wrapper"><img src="..."></div>，样式写在 .img-wrapper 上。
transform-origin: center 不只是“更好看”，而是必须项
不设这个，缩放中心就在左上角，悬停时图片会向右下偏移，视觉上像“被推开”。即使父容器有 overflow: hidden，偏移也会导致裁剪区域错位，依然露边。
立即学习“前端免费学习笔记（深入）”；
- 必须配合
display: block使用，否则 vertical-align 可能引入底部空白，放大后变明显白条 - 如果父容器是 Flex/Grid，还要加
align-items: flex-start防止图片被居中撑高 - 过渡动画必须写在默认态：
img { transition: transform 0.3s ease; }，否则首次 hover 没动画
移动端 :hover 失效不是你代码写错了
iOS Safari 和多数安卓浏览器没有持续悬停概念，:hover 只在点击瞬间触发一次。强行用 @media (hover: hover) 包裹才能避免在触屏设备上误触发。
- 稳妥写法：
@media (hover: hover) and (pointer: fine) { .img-wrapper:hover img { transform: scale(1.2); } } - 别用
transition: all—— 它可能意外过渡color、margin等属性，引发重排卡顿 - 如果要让放大图“浮最上层”，
<img>必须设position: relative+z-index: 0，hover 时升到z-index: 999
overflow: hidden 在部分浏览器下根本不起作用；而图片用 object-fit: cover 时，若父容器比例和原图不一致，缩放后裁剪边缘会偏移——这时与其硬调，不如统一用 aspect-ratio 或改用背景图方案。 
