只加 transform: scale() 会溢出，因其仅改变视觉尺寸而不影响文档流占位；需在直接包裹 img 的父容器上设 overflow: hidden 且明确宽高，同时 img 需设 display: block、object-fit: cover 和 transform-origin: center。
为什么只加 transform: scale() 会溢出？
因为 scale() 只改变渲染层的视觉尺寸，不改变文档流中的原始占位——图片仍按 100% 宽高撑开父容器，放大后超出部分直接“漏”出来。常见现象包括：相邻元素被挤开、滚动条意外出现、图片右下角突兀伸出容器边界。
overflow: hidden 必须加在哪个元素上？
必须加在「直接包裹 img 的父容器」上，不能加在更外层的 section 或 div.grid 上。浏览器裁剪只对直接父容器生效，加错位置等于没加。
- ✅ 正确结构：
<div class="img-wrapper"><img src="..."></div>，.img-wrapper { overflow: hidden; width: 300px; height: 200px; } - ❌ 错误写法：
.gallery { overflow: hidden; }—— 即使所有图片都在里面，也完全无效 - ⚠️ 注意：该容器必须有明确宽高（不能是
height: auto或靠内容撑开），否则overflow: hidden在部分浏览器中不触发裁剪
图片本身还要配哪些关键样式？
光有 overflow: hidden 和 scale() 还不够，三处细节不设好，悬停时照样跳位或模糊：
-
img必须设display: block：消除行内元素默认的基线留白，否则放大后底部多出空白、上下抖动 -
img推荐用object-fit: cover+width: 100%; height: 100%：确保图片填满容器且不拉伸变形 -
img必须显式设transform-origin: center：否则默认以左上角为原点缩放，图片会向右下方“滑出”裁剪区 - 过渡只写
transition: transform 0.3s ease：别用all，避免触发重排或拖慢动画
移动端 :hover 失效怎么办？
iOS 和 Android 默认不支持 :hover，点一下才触发、再点一下才取消，体验断裂。最稳妥的处理方式是条件性启用：
- 用媒体查询隔离鼠标设备：
@media (hover: hover) and (pointer: fine) { .img-wrapper:hover img { transform: scale(1.2); } } - 移动端改用
:active模拟点击放大：.img-wrapper:active img { transform: scale(1.1); } - 如果必须统一行为（比如相册页），建议用 JavaScript 监听
touchstart/touchend切换 class，比伪类更可控
真正容易被忽略的是 transform-origin 和 overflow: hidden 的绑定关系——它们不是“锦上添花”，而是让 scale() 在固定框内稳定工作的最小必要组合。少一个，效果就从“精致悬停”退化成“布局抖动”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
