必须配合transform-origin: center才能让图片居中等比放大，否则默认以左上角为原点导致偏移；需设父容器overflow:hidden、图片display:block、transition:transform 0.3s ease，并用@media(hover:hover)适配移动端。
用 transform: scale() 实现图片悬停放大
直接给图片加 transform: scale(1.2) 并配合 :hover 就能实现基础缩放，但默认会以左上角为原点放大，导致图片“跑偏”。必须配合 transform-origin: center 把缩放中心设在图片正中，否则悬停时图片会向右下偏移。
实操建议：
- 给
<img>元素设置明确的width和height（或使用aspect-ratio），避免缩放时页面重排 - 加上
transition: transform 0.3s ease让放大过程平滑，否则是瞬时跳变 - 不要只写
transition: all 0.3s—— 这会触发不必要的重绘，拖慢性能
为什么 overflow: hidden 常被忽略
放大后的图片可能超出容器边界，尤其当父容器没设尺寸或用了 display: inline 时，溢出部分会撑开布局或显示在外部。这时候必须给图片的直接父容器加 overflow: hidden。
常见错误现象：
立即学习“前端免费学习笔记（深入）”；
- 悬停后图片右侧/底部出现滚动条
- 放大时旁边文字被顶开
- 在 Flex 或 Grid 容器里，图片撑破列宽
正确做法：把图片包一层 <div>，设固定宽高 + overflow: hidden，再把 transform 加在 <img> 上。
scale() 的兼容性与 fallback 处理
现代浏览器都支持 transform: scale()，但 IE10+ 才开始支持，IE9 及更早版本不认。如果项目还需兼容 IE9，不能只依赖 CSS 缩放，得改用 JS 监听 mouseenter/mouseleave 动态改 width/height —— 但这样会触发 layout，性能差很多。
更现实的做法：
- 确认目标用户是否真用 IE9（现在绝大多数场景可直接放弃）
- 若必须兼容，用
@supports (transform: scale(1))包住缩放样式，IE9 自动跳过 - 别试图用
-ms-transform去 hack，IE9 对scale()的支持极不稳定
移动端触摸设备上的表现差异
手机和平板没有“悬停”概念，:hover 在 iOS Safari 和 Android Chrome 上默认不触发（除非模拟 hover 的特殊设置）。所以纯靠 :hover 的缩放，在触屏设备上基本无效。
解决思路有限但实用：
- 如果只是图库展示，加个点击展开大图的 JS 逻辑，比模拟 hover 更可靠
- 若坚持用 CSS，可同时写
:hover和:active，让触摸时短暂触发（但体验割裂） - 注意
transform在旧版 Safari 上需加-webkit-transform前缀，iOS 12 及更早版本仍需要
真正难处理的是缩放中心点在不同 DPR 屏幕下的像素对齐问题——比如在 iPhone 上放大后边缘轻微模糊，这不是 bug，是 subpixel rendering 导致的，加 will-change: transform 有时能缓解，但别滥用，它本身有内存开销。
