必须配套transform-origin: center、overflow: hidden（加在直接父容器）、display: block（加在img上），否则scale()会偏移、溢出、抖动；父容器需固定宽高，transition须写在默认态且仅限transform，移动端需@media(hover:hover)适配。
直接用 transform: scale() 会溢出、抖动、顶开文字——不是写法错了，是漏了三个强制配套项：transform-origin: center、overflow: hidden（加在直接父容器上）、display: block（加在 img 上）。
为什么图片一放大就“跑偏”或撑开布局？
因为 scale() 默认以左上角为原点缩放，图片放大后右下部分直接伸出原始占位框；而它又不改变文档流，所以周围元素完全感知不到变化，但溢出部分会触发滚动条或覆盖相邻内容。
-
transform-origin: center必须显式写，不能依赖默认值——哪怕文档说“默认是 center”，浏览器实际行为受 DPR、父容器尺寸影响，iOS 和高分屏下尤其不准 - 父容器必须有明确宽高（不能是
height: auto或靠内容撑开），否则overflow: hidden在部分浏览器中压根不生效 -
img是行内元素，默认带vertical-align: baseline，底部留白被放大后变成明显白条，导致视觉“跳动”
overflow:hidden 加在哪才有效？
只加在 img 自身或外层 .gallery 都无效。浏览器裁剪逻辑只对「直接父容器」生效，且该容器必须是替换元素的直接包裹层。
- ✅ 正确结构：
<div class="img-wrapper"><img src=""></div>，样式写在.img-wrapper上 - ❌ 错误写法：
.gallery { overflow: hidden; }—— 即使所有图片都在里面，也不起作用 - ⚠️ 如果用 Flex/Grid 布局，
.img-wrapper还要加align-items: flex-start，否则图片会被居中撑高，缩放锚点偏移
怎么让悬停动画平滑且不卡顿？
过渡写错位置或选错属性，会导致第一次 hover 没动画、后续才生效，甚至触发重排卡顿。
-
transition: transform 0.3s ease必须写在默认态（非:hover），否则浏览器无法预判起点 - 别用
transition: all—— 它可能意外过渡color、margin等触发布局的属性 -
img上要先写transform: scale(1)（初始值），否则某些浏览器首帧会闪一下 - 如果页面复杂，可加
will-change: transform提示 GPU，但别滥用——它会提前创建合成层，增加内存开销
移动端点击没反应或只闪一下？
iOS Safari 和多数安卓浏览器没有持续悬停状态，:hover 只在首次点击时临时触发一次，这不是 bug，是规范行为。
- 稳妥做法是用媒体查询隔离：
@media (hover: hover) and (pointer: fine) { .img-wrapper:hover img { transform: scale(1.2); } } - 移动端可 fallback 到
:active：.img-wrapper:active img { transform: scale(1.1); } - 若需统一行为（比如图库页），JS 监听
touchstart/touchend切换 class 更可控，比伪类可靠
真正难调的不是 scale 值大小，而是 transform-origin 在不同 DPR 屏幕下的像素对齐——比如 iPhone 上放大后边缘轻微模糊，这不是 bug，是渲染机制决定的，will-change 也压不住，得接受它。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
