:hover 配合 transform: scale() 是最稳的纯 CSS 图片悬停放大方案，需配合固定尺寸父容器、overflow: hidden 裁剪、display: block 及正确 transition 位置，兼顾兼容性与性能。
用 :hover 触发 transform: scale() 是最稳方案
纯 CSS 实现图片悬停放大，:hover 伪类配合 transform: scale() 是唯一推荐路径。它不依赖 JS、硬件加速、动画顺滑，且 IE10+ 均支持（IE 需补 -ms-transform）。别碰 zoom —— Firefox 完全不认，还会触发重排，布局容易崩。
overflow: hidden 必须加在父容器上，不是图片本身
只给 img 加 scale(1.2)，图片会直接撑出布局，页面跳动或出现滚动条。真正起作用的是父容器的裁剪能力：
-
.image-wrapper必须设明确宽高（如width: 300px; height: 200px;） -
.image-wrapper必须加overflow: hidden;，否则裁剪无效 -
img推荐设display: block;，避免默认inline带来的底部空白 - 若需等比填充，加
object-fit: cover;，否则缩放后可能偏移或留白
transition 要写在常态样式里，不是 :hover 里
常见错误：把 transition 放在 img:hover 块里，结果第一次悬停是“啪”一下跳变，之后才有动画。正确写法：
Json Schema Toolkit
下载
使用 JSON Schema 验证 JSON 数据，从示例 JSON 生成 schema，并将其转换为 TypeScript 接口、Python 数据类或 Markdown 文档。
img {
transition: transform 0.3s ease;
}
img:hover {
transform: scale(1.15);
}
- 放大倍数建议控制在
1.1～1.3之间；超过1.3容易糊，尤其小图 - 缓动用
ease就够用；追求更柔可换cubic-bezier(0.25, 0.46, 0.45, 0.94) - 别写
transition: all 0.3s—— 会意外过渡opacity或color，引发非预期重绘
移动端和键盘用户不能被忽略
悬停效果在触摸设备上天然失效，但不代表可以不管：
立即学习“前端免费学习笔记（深入）”；
- 用
img:focus补充键盘焦点支持（比如按 Tab 键到达图片时也放大） - 移动端建议降级为点击放大（可用
details/summary或纯 CSS:focus-within模拟），或直接提供大图链接 - 加
cursor: pointer;是基本提示，但别依赖它作为唯一交互线索 -
will-change: transform;可在必要时加给img，提升高频悬停下的渲染性能（仅限性能敏感场景）
真正容易翻车的点不在 scale 多少，而在于三层没对齐：容器尺寸固定 + overflow: hidden + object-fit 行为一致。漏掉任意一个，就可能出现边缘撕裂、滚动条闪现或图片居中偏移。
