: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 块里，结果第一次悬停是“啪”一下跳变，之后才有动画。正确写法：
jm-jsjkxyjs02-zlm-405
下载
使用约定式提交（Conventional Commits）生成标准化的 Git 提交信息。适用于以下场景： (1) 暂存更改时需要提交信息； (2) 审查 diff 时希望获得结构化摘要； (3) 编写 PR 描述或变更日志（changelog）条目； (4) 用户明确要求“为本次更改编写提交信息”。 该功能会分析已暂存/未暂存的 diff，并生成按类型（type）划分范围的提交信息。
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 行为一致。漏掉任意一个，就可能出现边缘撕裂、滚动条闪现或图片居中偏移。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
