必须配对overflow:hidden容器、显式transition:transform和稳定transform-origin，否则缩放会溢出、跳变或错位；因scale()不改变文档流，需容器约束视觉溢出，且过渡须精准绑定transform属性。
直接用 transform: scale() + :hover 就能实现，但必须配对 overflow: hidden 容器、显式 transition: transform 和稳定 transform-origin，否则缩放会溢出、跳变或错位。
为什么图片 hover 缩放后会“撑开”布局或溢出边界
根本原因是没加容器约束。transform: scale() 本身不改变文档流尺寸，但放大后的视觉内容若超出父容器，浏览器默认会显示出来——这不是 bug，是正常渲染行为。
- 必须用一个有明确
width和height的父容器（如.img-wrapper），并在其上设overflow: hidden - 不要给
<img alt="如何实现响应式的图片库悬停缩放_CSS的transform与hover组合" >元素本身加overflow: hidden，它无效 - 如果父容器用 Flex/Grid 布局，检查是否被
align-items: stretch拉高，导致实际高度不可控
如何让缩放动画平滑且不触发重排
关键不是“加 transition”，而是加对 transition。只过渡 transform，不碰 width、height 或 margin。
- 初始状态必须声明
transform: scale(1)，否则部分浏览器首次 hover 会闪一下 - 写成
transition: transform 0.3s ease，别用transition: all 0.3s——后续加filter或opacity时容易意外联动 - 对高频交互区域（如图库网格），可加
will-change: transform提前提示合成层，但别滥用，它会增加内存开销
响应式场景下缩放比例怎么设才不糊不崩
固定像素值（如 scale(1.3)）在小屏上可能太猛，大屏上又不够；而百分比缩放本身不解决这个问题，得靠断点控制。
立即学习“前端免费学习笔记（深入）”；
- 基础缩放用
scale(1.15)，适合多数桌面端；移动端建议降到scale(1.08)或直接禁用 - 用媒体查询区分：
@media (max-width: 768px) { .zoomable:hover { transform: scale(1.08); } } - Retina 屏上超过
scale(1.5)容易模糊，因浏览器插值精度下降；优先压缩原图再缩放，而非依赖 CSS 拉伸 - 避免在
srcset切换图片的同时做scale，两张图分辨率差异大会导致缩放瞬间“抽搐”
真正卡住效果的，往往不是 scale 值本身，而是父容器有没有被 overflow 锁死、transition 有没有精准绑定到 transform、以及 transform-origin 是否和视觉焦点匹配——这三处漏掉任意一个，hover 缩放就从增强体验变成破坏节奏。
