图片悬停放大应使用transform: scale()配合:hover实现，必须设置transform-origin: center确保居中缩放，否则默认左上角为原点会导致偏移；需添加transition: transform 0.3s ease实现平滑动画，并配父容器overflow: hidden防止溢出。
图片悬停放大用 transform: scale() 最直接
不用 JS 就能实现，核心就是 CSS 的 transform 配合 :hover。关键不是“加动画”，而是“控制放大中心点”——默认会以左上角为原点放大，看着像偏移，实际是缩放锚点不对。
- 必须加
transform-origin: center，否则图片会往右下跑 - 放大倍数建议控制在
scale(1.2)到scale(1.5)之间，再大容易撑破容器 - 加
transition: transform 0.3s ease让变化平滑，不加就突兀跳变 - 父容器最好设
overflow: hidden，避免放大时边缘露出来
<img> 标签直接写样式容易漏掉关键限制
很多人把样式直接写在 <img> 标签的 style 属性里，结果 hover 没反应——常见原因是没给图片设宽高或父容器没约束尺寸。
-
<img>必须有明确宽度（比如width: 300px），不能只靠内容撑开 - 如果图片放在
<div> 里，该 <code><div> 要设 <code>position: relative，否则transform-origin可能失效 - 不要用
zoom替代transform，zoom是非标准属性，Firefox 不支持 - 用
background-size: 120%+background-position: center模拟放大 - 必须配
background-repeat: no-repeat，否则放大后可能重复显示 - 过渡要写全：
transition: background-size 0.3s ease, background-position 0.3s ease - 注意：背景图无法像
<img>那样自然保持宽高比，放大后可能裁切，得提前确认容器比例 - 简单方案：加
@media (hover: hover) and (pointer: coarse)媒体查询做降级 - 更稳妥做法：用
touchstart+touchendJS 控制 class 切换，但仅当真需要交互反馈时才加 - 别强行让移动端也“悬停”，手指没有“悬停”概念，优先考虑点击反馈或加载新页
用 background-image 的场景要换写法
如果图片是通过 CSS 的 background-image 加载的（比如轮播图、图标按钮），就不能对 <img> 操作，得改背景尺寸和位置。
移动端触摸屏没 :hover 怎么办
iOS 和部分 Android 浏览器在首次点击前不触发 :hover，导致悬停效果不生效——这不是 bug，是浏览器策略。
真正麻烦的不是怎么写，而是放大后图片模糊、文字错位、或者和其他定位元素打架——这些往往是因为没锁死父容器的尺寸和定位上下文，而不是 scale 值设错了。
