图片放大溢出的根本原因是transform: scale()仅改变视觉渲染而不影响文档流，必须同时设置overflow: hidden、display: block和transform-origin三者缺一不可。
单纯加 transform: scale(1.2) 一定会溢出，不加 overflow: hidden 和精准的 transform-origin 就不是“不溢出”，只是还没被你发现错位。
为什么图片一放大就撑破容器或跳位
根本原因是 transform: scale() 只改变视觉渲染，不改变文档流——放大的内容仍按原始尺寸占位，且默认以左上角为原点缩放。结果就是：右下部分突出来、周围元素被挤开、鼠标移入瞬间布局重排。
- 图片是
display: inline（默认），底部有基线留白，放大后这空白也被拉伸，加剧错位 - 父容器没设固定宽高，
overflow: hidden失效（它只对有渲染尺寸的块级容器有效） -
transform-origin没显式声明，默认是50% 50%，但若容器有 padding 或 border，坐标系会偏移
必须同时设置的三个 CSS 规则
缺一不可。这不是“推荐写法”，而是浏览器渲染机制决定的硬性配合。
- 父容器加
overflow: hidden—— 裁掉所有超出边界的像素，这是“不溢出”的物理防线 - 图片加
display: block—— 消除行内元素默认的底部空白，避免缩放时上下抖动 - 图片加
transform-origin: center（或具体百分比）—— 确保缩放中心在可视区域中央，而非左上角
示例结构：
立即学习“前端免费学习笔记（深入）”；
.img-container {
width: 300px;
height: 200px;
overflow: hidden;
}
.img-container img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transform-origin: center;
transition: transform 0.3s ease;
}
.img-container:hover img {
transform: scale(1.2);
}
移动端 hover 失效时怎么补救
iOS Safari 和多数安卓浏览器不真正支持 :hover，点一下才触发、再点一下才取消，体验断裂。不能只靠 CSS。
- 用媒体查询隔离：
@media (hover: hover) and (pointer: fine)包裹 hover 样式，只对鼠标设备生效 - 触摸设备改用
:active（注意：它只在手指按下瞬间生效，松开即恢复） - 真要稳定响应，得用 JS 监听
touchstart/touchend，手动切换 class，比如.is-active，再写.img-container.is-active img { transform: scale(1.2); }
缩放后图片模糊或边缘锯齿怎么办
这不是代码写错，是浏览器对非整数倍缩放做双线性插值的必然结果，尤其在 Retina 屏上明显。
- 优先提供分辨率更高的原图（显示 300px 宽，给 600px 宽源图），让缩放时有足够像素可采样
- 避免
scale(1.07)这类微小值，选scale(1.2)、scale(1.25)更易对齐物理像素 - 加
image-rendering: -webkit-optimize-contrast（Safari）或image-rendering: crisp-edges（Firefox），Chrome 基本无视这些声明 - 如果要求严格清晰，改用
background-image+background-size控制，比<img alt="CSS如何实现鼠标悬停图片放大不溢出_通过transform与overflow控制缩放" >标签可控性更强
最常被忽略的是 overflow: hidden 和 transform-origin 的组合——不加它们，demo 里看起来“差不多”，一旦放进带 flex/grid/absolute 的真实页面，立刻错位、溢出、遮挡相邻元素。
