overflow:hidden 是缩放不溢出的关键，因其在视觉层面裁剪超出父容器的内容而不触发重排，但需作用于有明确宽高且非 inline 显示的直接父容器，并配合 transform 和 transition 实现流畅缩放。
overflow:hidden 为什么是缩放不溢出的关键
图片放大时默认会撑开父容器，甚至突破布局边界。给父容器加 overflow:hidden 是最直接的裁剪手段——它不阻止 transform: scale() 的计算和渲染，只让超出父盒模型的内容不可见。注意：这个隐藏是视觉层面的，不是移除或重排，所以不会影响其他元素的定位或触发重绘。
- 必须作用在图片的直接父容器上，而不是图片本身（
img元素不支持overflow） - 父容器需有明确宽高（比如用
width和height设置，或由子图撑出），否则overflow:hidden可能无效 - 不要同时设
display: inline或display: inline-block且未设宽高，容易导致裁剪失效
scale() 放大必须配合 transition 才自然
纯 transform: scale(1.2) 一上来就跳变，体验生硬。加 transition 控制变化节奏：
img {
transition: transform 0.3s ease;
}
img:hover {
transform: scale(1.2);
}-
transition要写在非 hover 状态下，否则第一次悬停无动画 - 推荐用
ease或cubic-bezier(.25,.46,.45,.94)，比linear更符合人眼预期 - 避免对
width/height做过渡——这会触发重排，性能差；transform只走合成层，更高效
常见溢出原因和对应修复
实际写的时候，以下几点最容易让放大后依然“露边”：
- 父容器没设
position: relative，而子图用了position: absolute——此时overflow:hidden对绝对定位子元素可能失效，加position: relative强制建立包含块 - 图片本身带默认
vertical-align: baseline，导致底部留白，放大后白边也被放大并溢出，统一设vertical-align: top或display: block - 使用了
object-fit: cover但父容器宽高比和图片不一致，缩放后边缘裁剪位置偏移，建议先确保父容器与图片原始比例一致，或改用object-fit: contain+background-size: cover方案 - 在 Flex/Grid 容器中，未设
align-items: flex-start或justify-content: flex-start，导致图片被居中撑开，放大后上下左右都溢出
移动端 touch 设备需要额外处理
iOS Safari 和部分安卓浏览器对 :hover 支持不稳定，纯靠悬停会失效：
立即学习“前端免费学习笔记（深入）”；
- 加
@media (hover: hover) and (pointer: fine)包裹 hover 样式，避免触屏设备误触发 - 触屏设备可考虑用
:active临时放大，或监听touchstart动态加 class -
scale()在低配安卓机上可能模糊，加will-change: transform提前提示合成，但别滥用，否则内存占用上升
真正卡住人的往往不是 scale 多少，而是父容器是否形成了有效的包含块、是否意外继承了 margin/padding、以及是否在响应式断点里漏掉了 overflow 设置。
