必须设置 transform-origin: center 才能让图片居中等比放大，否则默认以左上角为原点导致偏移；需配合 display: block、transition 和 max-width: 100% 等样式确保兼容性与布局稳定。
用 CSS transform: scale() 实现图片悬停放大
直接给 <img> 元素加 :hover 状态下的 transform: scale(1.2) 就能实现基础放大，但要注意默认会以左上角为原点缩放，视觉上会“偏移”。必须配合 transform-origin: center 才能让图片居中等比放大。
常见错误是只写 scale(1.2) 却没设 transform-origin，结果图片一悬停就往右下跑，还以为是布局塌陷。
- 必须给图片设置明确的
display: block或display: inline-block，否则transform-origin在某些浏览器里对inline元素行为不一致 - 推荐加上
transition: transform 0.3s ease，不然放大是瞬时跳变，体验生硬 - 如果父容器有
overflow: hidden，放大后边缘会被裁切——这不是 bug，是预期行为，需要提前预留空间或调整父容器样式
图片放大时保持宽高比且不溢出容器
单纯 scale() 放大会突破原始尺寸，若父容器高度固定（比如卡片布局），图片可能撑开容器或溢出。这时不能只依赖 transform，得结合 max-width 和 height: auto 控制原始尺寸。
典型场景：响应式网格中的头像或商品图，要求小图悬停略放大、大图不拉伸变形。
- 给
<img>设置max-width: 100%和height: auto，确保它在不同容器宽度下自动等比缩放 - 悬停时用
transform: scale(1.15)（别超过 1.3，否则移动端手指误触易触发） - 如果父容器用了
flex或grid，记得检查align-items和justify-content，否则放大后可能因基线对齐产生意外位移
兼容旧版 Safari 和 iOS WebKit 的注意事项
Safari 13.1 之前对 transform 在 <img> 上的支持有渲染毛刺，尤其搭配 will-change: transform 时可能出现闪屏。iOS 14+ 基本稳定，但低版本仍需兜底。
- 强制开启硬件加速可缓解：加
transform: translateZ(0)或will-change: transform到悬停样式中（仅在必要时加，滥用会影响内存） - 不要对
<picture></picture>或<source></source>直接写:hover，它们不响应鼠标事件，得把样式写在最内层的<img>上 - 如果用
object-fit: cover裁剪图片，scale()会同时放大裁剪区域——想实现“镜头推近”效果可以，但想保持裁剪框不动就得换思路（比如改background-position）
用 JavaScript 补充动态控制放大倍数（非必需但更灵活）
纯 CSS 能满足大部分需求，但如果要根据图片原始尺寸、视口位置或用户设备像素比动态调整放大系数，就得用 JS 监听 mouseenter 并操作 style.transform。
例如：大图（宽 > 800px）只放大 1.05 倍防糊，小图（宽
- 用
img.naturalWidth拿真实尺寸，别用offsetWidth（受 CSS 影响） - 放大前先
img.style.transition = 'none'，再setTimeout(() => { img.style.transition = 'transform 0.3s ease' }, 0)，避免首次悬停无动画 - 务必在
mouseleave里重置transform，否则离开后样式残留，影响后续交互
scale 值，却漏掉一行 transform-origin: center，结果始终不对劲。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
