必须为 img 的直接父容器设置 overflow: hidden 且该容器需有明确宽高，同时 img 需设 display: block、object-fit: cover、width/height: 100% 和 transform-origin: center，否则将出现抖动、漏图或错位。
直接加 transform: scale() 一定会溢出，不加 overflow: hidden 就等于没做裁剪——这不是可选项，是必须项。
为什么 overflow:hidden 必须加在直接父容器上
浏览器的裁剪逻辑只对「直接父容器」生效。img 元素自身不支持 overflow，设了也无效；而如果把 overflow: hidden 加在外层 .gallery 或 .grid 上，放大后的图片依然会突破各自容器边界，甚至遮挡相邻项。
- ✅ 正确结构：
<div class="img-wrapper"><img src=""></div>，样式写在.img-wrapper上 - ❌ 错误写法：
.gallery { overflow: hidden; }—— 完全不生效 - ⚠️ 父容器必须有明确宽高：不能是
height: auto、max-height或靠内容撑开；否则部分浏览器（尤其是 Safari）可能忽略裁剪
图片自身必须配齐的三个样式
光有 overflow: hidden 和 scale() 不够，缺一就会抖动、露白边或偏移中心。
-
display: block：消除img默认的vertical-align: baseline带来的底部空白，否则放大后空白也被拉伸，视觉上“跳一下” -
object-fit: cover+width: 100%; height: 100%：确保图片填满容器且不拉伸变形；若用contain，需同步调transform-origin避免缩放错位 -
transform-origin: center：显式声明，防止被 flex 对齐、padding 或父级transform覆盖掉默认值
transition 和 scale 的写法陷阱
动画卡顿、闪屏、首次悬停无效果，基本都出在这几处。
立即学习“前端免费学习笔记（深入）”；
-
transition必须写在非 hover 状态下：img { transition: transform 0.3s ease; }，而不是只写在:hover里 - 别用
transition: all：会意外过渡color、margin等触发布局的属性，拖慢性能 - 推荐补一句
will-change: transform或backface-visibility: hidden，尤其在 Safari 中能避免首帧抽帧 - 移动端不要依赖
:hover：用@media (hover: hover) and (pointer: fine)包裹，否则触屏设备点一下才触发、再点一下才取消
z-index 置顶和层叠上下文问题
放大后被其他图片盖住？不是 scale() 失效，是 z-index 没生效于正确的层叠上下文。
-
img必须设position: relative（或其他定位值），否则z-index完全无效 - 基础层级统一设为
z-index: 0，悬停时升到z-index: 999，并给transition加上z-index属性（如transition: transform 0.3s, z-index 0.3s） - 避免父容器（如
.card）自己创建新的层叠上下文（比如设了opacity < 1或filter），否则子元素的z-index只在该上下文中有效
真正容易被忽略的是：overflow: hidden 和 transform-origin: center 不是“优化项”，它们和 scale() 是绑定生效的最小组合。少一个，就从稳定缩放退化成布局抖动或边缘漏图。
