父容器未设宽高时overflow:hidden无效；img为inline元素导致悬停跳动；transform-origin不声明默认为左上角；移动端:hover不可靠。
父容器没设宽高，overflow: hidden 就是摆设
很多人加了 overflow: hidden 却发现图片放大后依然溢出，根本原因是父容器（比如 <div>）没有明确的 <code>width 和 height。CSS 的 overflow: hidden 只在容器有“确定边界”时才真正裁切内容；如果宽高是 auto 或依赖子元素撑开，浏览器无法判断裁切范围，效果就失效。
实操建议：
- 给父容器写死尺寸，例如
width: 300px; height: 200px;（适合卡片固定尺寸场景） - 或用
aspect-ratio: 4/3;+width: 100%;实现响应式但边界可控 - 避免只写
max-width或min-height，它们不构成裁切所需的“确定尺寸” - 检查是否被外层 flex/grid 容器的
align-items: stretch拉高了实际高度——这会导致父容器高度不可控
img 是 inline 元素，悬停会跳动
默认 <img> 是行内元素，底部自带基线留白（约 4px），transform: scale() 放大时会连同这段空白一起缩放，视觉上像图片突然下移或抖动。这不是 bug，是渲染机制使然。
必须做两件事：
- 给
img加display: block;，彻底消除基线干扰 - 如果要用 flex 居中，确保父容器设
display: flex; justify-content: center; align-items: center;，而不是靠margin: auto——后者在 inline 上下文里无效 - 慎用
vertical-align: top替代display: block，它只是掩盖问题，没解决布局本质
transform-origin: center 不写就是左上角缩放
不显式声明 transform-origin，浏览器按规范用 50% 50%，但这个“中心”是相对于元素自身盒模型计算的。如果 img 有 border、padding，或父容器用了非对称 padding，视觉中心就会偏移，放大后看起来像图片“跑出视野”。
安全做法：
- 统一写
transform-origin: center center;（两个值更明确，避免浏览器解析歧义） - 把所有间距控制收归父容器：图片自身不设
margin、padding，用父div的padding或gap控制留白 - 如果图片带圆角（
border-radius），注意transform-origin仍以矩形盒为准，圆角不影响缩放锚点
移动端 :hover 基本不可靠，别硬扛
iOS Safari 和多数安卓浏览器里，:hover 只在点击后触发一次，且常延迟 300ms。纯靠 CSS :hover 做悬停放大，在手机上等于没做。
能用的方案只有两个：
- 用媒体查询隔离：
@media (hover: hover) and (pointer: fine) { .img-container:hover img { transform: scale(1.2); } }，这样触屏设备直接跳过整套规则 - 改用 JS 切换 class：
touchstart时加is-hovered，touchend后 1.5s 移除，模拟“长按即放大”，比等:hover触发靠谱得多 - 完全放弃移动端悬停——很多产品实际交互中，用户更习惯点击进详情页看大图，强行做 hover 反而增加误操作
真正麻烦的是混合设备适配：你得同时处理 hover 延迟、touch 事件穿透、双指缩放冲突，这时候 scale() 只是表层动画，背后是交互意图和加载策略的取舍。
