必须加 overflow: hidden 是为了裁剪放大后溢出的部分，防止遮挡相邻元素、避免布局抖动和重排，它是缩放行为在容器内生效的锚点。
纯 CSS 实现鼠标悬停图片放大，transform: scale() 是最轻量、性能最好的方案，但必须配合 overflow: hidden 和正确的定位控制，否则会溢出、跳动或错位。
为什么必须加 overflow: hidden？
不加会导致放大后图片撑开容器，溢出部分遮挡相邻元素，甚至触发页面重排。尤其当父容器是 inline-block 或未设固定尺寸时，放大瞬间可能引发布局抖动。
-
overflow: hidden是裁剪边界，不是可选项——它让缩放“只在框内生效” - 如果容器本身用
flex或grid布局，也要确认其min-width/min-height没被压缩 - 移动端 Safari 对未设
overflow: hidden的缩放渲染更不稳定，容易闪帧
transform-origin 设成什么才不偏移？
默认 transform-origin: 50% 50% 看似合理，但实际受 object-fit、padding、border 影响，缩放中心常偏移。最稳妥的是显式声明并匹配内容对齐方式。
- 图片用
object-fit: cover→transform-origin: center - 图片用
width: 100%; height: 100%且容器无 padding/border →transform-origin: 0 0更可控 - 避免写
transform-origin: left top—— 它和0 0行为不完全等价，某些浏览器解析有差异
如何防止 hover 时图片“跳一下”？
跳动主因是图片默认 display: inline 带来的基线空白，放大后该空白被拉伸，视觉上像突然上移。
- 给
img加display: block或vertical-align: top - 容器别用
font-size: 0强制清除间隙——它会影响子元素内联文本，维护成本高 - 如果图片在
flex容器里，检查align-items是否为stretch（默认），可改flex-start避免拉伸干扰
移动端 :hover 失效怎么办？
iOS 和 Android 浏览器不真正支持 hover，伪类只在点击后短暂触发，导致放大一闪而过。
- 用媒体查询隔离：
@media (hover: hover) and (pointer: fine) { .img:hover { transform: scale(1.2); } } - 不要依赖
:hover做关键交互（比如商品图预览），改用click+class切换更可靠 -
:active可作为降级方案，但体验有限——它只在按住时生效，松开即恢复
真正难的不是写几行 scale()，而是理解 overflow: hidden 不只是“裁掉多余”，它是整个缩放行为的锚点；transform-origin 也不是一个固定值，它得跟着你的 object-fit 和容器盒模型走。漏掉任一环，放大效果就从“优雅”变成“诡异”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
