用 css transform: scale() 配合 :hover 实现图片悬停放大，因不触发重排、默认居中缩放且性能更优；需配合 transition 设置过渡动画，并注意 overflow、基线对齐及浏览器兼容性。
直接用 CSS 的 transform: scale() 配合 :hover 就能实现，不需要 JS，也不用额外库。
为什么用 transform: scale() 而不是改 width/height
改宽高会触发重排（reflow），影响性能；transform 只触发重绘（repaint），更顺滑。而且它默认以元素中心为缩放原点，悬停时自然居中放大——这点很关键，否则图片会偏移。
如果想让缩放以左上角为原点，得加 transform-origin: top left；但多数场景下保持默认（center center）最合理。
transition 必须加，否则没有动画效果
只写 scale(1.2) 会让图片瞬间跳变。必须显式声明过渡属性和时长：
img {
transition: transform 0.3s ease;
}
img:hover {
transform: scale(1.2);
}
-
transform是必须明确写出的过渡属性名，不能简写成all（兼容性差，且可能意外过渡其他属性） -
ease比linear更自然；如果要更柔和，可用cubic-bezier(0.25, 0.46, 0.45, 0.94) - 时间建议控制在
0.2s–0.4s：太短像没动，太长显得迟钝
实际使用时容易漏掉的三件事
很多人在本地测试正常，上线后失效，往往卡在这几个点：
- 图片父容器没设
overflow: hidden—— 放大后边缘会溢出，加一句就能裁掉多余部分 - 用了
display: block或vertical-align: top消除图片默认的基线对齐缝隙（尤其在内联布局里） - 某些旧版 Safari 需要加
-webkit-transform前缀（iOS 12 以下、macOS Mojave 以前），虽然现在基本可不加，但若用户反馈闪动或不生效，补上更稳：-webkit-transform: scale(1.2)
缩放倍数别超过 1.5，视觉上容易失真；父容器尺寸固定时，记得同步检查 max-width 是否限制了缩放上限——有时候不是代码没起作用，是图片早被容器压扁了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
