直接用transform: scale()配合transition可实现平滑放大，但需设transform-origin: center确保中心缩放，并在父容器加overflow: hidden防止溢出；transition必须写在常态样式中，而非:hover里，否则首次悬停无动画。
直接用 transform: scale() 配合 transition 就能实现平滑放大，不需要 JS，但缩放中心点和父容器溢出处理是关键。
为什么图片悬停后“飘”出容器或抖动？
默认缩放以元素左上角为原点，导致图片向右下偏移；同时父容器没设 overflow: hidden，放大的部分会撑开布局或溢出显示。
解决方法：
- 加
transform-origin: center确保绕中心缩放 - 父容器必须设
overflow: hidden，否则放大后边缘露出来 - 避免在
img上直接写width/height百分比，改用max-width: 100%防止拉伸失真
transition 该写在哪个元素上？
必须写在 img（或包裹它的容器）的常态样式里，而不是 :hover 里，否则首次悬停无动画。
常见错误写法：img:hover { transform: scale(1.2); transition: transform 0.3s ease; } ❌
正确写法：
img { transition: transform 0.3s ease; }<br>
img:hover { transform: scale(1.2); } ✅
注意：transition 要指定具体属性（如 transform），别偷懒写 all，否则可能触发重排或意外动画。
移动端点击放大失效怎么办？
iOS Safari 和部分安卓浏览器对 :hover 支持弱，纯 CSS 悬停在触摸设备上通常不触发。
如果必须支持触屏，有两个务实选择：
- 放弃纯 CSS，用
touchstart/touchend切换 class（例如加.is-hovered） - 保留 CSS 方案，但接受“移动端无悬停效果”，并在交互设计中用其他方式补偿（比如点击展开大图）
别试图用 @media (hover: hover) 检测来自动降级——兼容性差，且很多安卓机报错为 hover: none 却仍响应 hover。
真正麻烦的不是写几行 CSS，而是缩放时图片边缘像素被插值模糊、高 DPI 屏幕下 scale(1.2) 实际渲染分辨率不足，这些得靠 image-rendering: -webkit-optimize-contrast 或换用 SVG/响应式 srcset 来缓解，但已超出悬停动画本身范畴。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
