应使用 transform: scale() 配合 overflow: hidden 和固定宽高容器，避免 width/height 动画；移动端需用 @media (hover: hover) 隔离或 JS 替代；srcset 要覆盖放大倍率并慎用 image-rendering；多图场景用 IntersectionObserver 懒启用并避免滥用 will-change。
hover 放大图片时页面布局抖动
直接用 transform: scale() 而不配合 overflow: hidden 或容器约束，图片放大后会撑开父容器，导致周围元素跳动。常见于 <div> 包裹 <img> 但没设宽高限制的场景。
- 给图片外层容器（比如
<div class="img-container">）设置固定宽高和overflow: hidden - 图片本身设为
display: block，避免默认行内元素的基线间隙 - 放大用
transform: scale(1.2)，别用width/height动画——后者会触发重排，更卡且易抖 - 加
transition: transform 0.3s ease让过渡平滑，别漏写ease，否则默认ease虽可用，但显式写出更可控
CSS hover 放大在移动端失效
移动端没有 hover 状态，纯 CSS 的 :hover 在 iOS Safari 和多数安卓浏览器里点一下才触发、再点一下才恢复，体验断裂。这不是 bug，是规范行为。
- 如需兼容触屏，改用
:active+touchstartJavaScript 监听，或直接上focus-within配合 tabindex（适合可聚焦容器） - 更稳妥的做法：用
@media (hover: hover) and (pointer: fine)包裹 hover 样式，让移动端自动跳过 - 别依赖
:hover做关键功能，比如放大后显示文字说明——移动端用户可能根本看不到
img 标签 srcset 下 hover 放大模糊
图片被 transform: scale() 放大后，浏览器会插值拉伸像素，如果原图分辨率不够或 srcset 提供了小尺寸图，在高 DPI 屏幕下尤其糊。
- 确保
srcset中最大尺寸覆盖用户可能放大的比例，比如放大 1.5 倍，就至少提供 1.5× 设备像素比对应的图 - 加
image-rendering: -webkit-optimize-contrast（Safari）和image-rendering: crisp-edges（Firefox）抑制模糊，但 Chrome 仅支持pixelated（锯齿感强，慎用） - 更可靠的方式：放大时切换到高清图地址，用 JS 监听
mouseenter动态替换src，而非靠 CSS 拉伸
多个图片同时 hover 放大卡顿
当一页有 10+ 张图都绑了 :hover { transform: scale() }，滚动或悬停时 CPU 占用明显升高，尤其老设备或低端安卓机。
立即学习“前端免费学习笔记（深入）”；
- 只对可视区内的图片启用 hover 效果，用
IntersectionObserver控制 class 开关 - 避免在
<body>或大容器上写通用img:hover，精确到类名，比如.gallery-img:hover - 加上
will-change: transform可提前提示 GPU 加速，但别滥用——每个都加反而增加内存开销 - 测试时打开 Chrome DevTools → Rendering → “Paint flashing”，看是否频繁重绘；若闪红块多，说明缩放触发了不必要的绘制
