overflow: hidden 必须加在直接父容器上，因浏览器裁剪仅对直接父生效；img自身不支持该属性，外层容器设置无效；正确结构为.img-wrapper包住img并设overflow:hidden、transform-origin:center、display:block。
直接加 transform: scale() 一定会溢出，overflow: hidden 不是可选项，而是必须项——它和 transform-origin: center、display: block 共同构成悬停放大的最小稳定组合。
为什么 overflow:hidden 必须加在直接父容器上
浏览器的裁剪逻辑只对「直接父容器」生效。给 <img> 自身设 overflow: hidden 完全无效（<img> 是替换元素，不支持该属性）；给外层 .gallery 或 .grid 加也无效，因为缩放发生在图片层级，裁剪范围没覆盖到它。
- ✅ 正确结构：
<div class="img-wrapper"><img src=""></div>，样式写在.img-wrapper上 - ❌ 错误写法：
.gallery { overflow: hidden; }—— 即使所有图片都在里面，也不起作用 - ⚠️ 父容器还必须有明确宽高（不能是
height: auto或靠内容撑开），否则部分浏览器下overflow: hidden不触发裁剪
scale() 溢出的三个隐藏诱因
即使写了 overflow: hidden，放大后仍“露边”，大概率是以下其一：
-
<img>是行内元素，默认带vertical-align: baseline，底部留白被放大后变成明显白条——加display: block或vertical-align: top - 父容器用了
flex或grid，但没设align-items: flex-start，导致图片被居中撑高，缩放锚点偏移 - 图片用了
object-fit: cover，但父容器宽高比与原图不一致，缩放后边缘裁剪位置跑偏；建议先统一比例，或改用background-image+background-size: cover
transition 写错位置会导致第一次悬停无动画
transition 必须写在非悬停状态（即默认态），否则浏览器无法预判变化起点，首次 hover 就是硬切。
- ✅ 正确：
img { transition: transform 0.3s ease; }+img:hover { transform: scale(1.2); } - ❌ 错误：
img:hover { transition: transform 0.3s ease; transform: scale(1.2); }—— 第一次没动画，后续才有 - 别用
transition: all，它可能意外过渡color、margin等触发布局的属性，卡顿且不可控
移动端 hover 失效不是 bug，是规范行为
iOS Safari 和多数安卓浏览器没有持续悬停状态，:hover 只在点击后临时触发一次，再点就取消——这不是代码问题，是设备能力限制。
- 稳妥做法：用媒体查询隔离鼠标设备，
@media (hover: hover) and (pointer: fine) { .img-wrapper:hover img { transform: scale(1.2); } } - 触屏设备可用
:active模拟点击放大：.img-wrapper:active img { transform: scale(1.1); } - 真要统一行为（比如作品集页），得用 JS 监听
touchstart/touchend切换 class，比纯 CSS 更可控
真正容易被忽略的是：transform-origin 和 overflow: hidden 的绑定关系不是“优化项”，而是让 scale() 在固定框内稳定工作的最小必要组合。少一个，效果就从“精致悬停”退化成“布局抖动”或“边缘露馅”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
