鼠标悬停图片放大需设transform-origin: center并用容器固定宽高+overflow: hidden；高清屏要原图≥1.5倍显示尺寸、加image-rendering优化；移动端改用touch事件切换class；懒加载时须显式设img的width/height属性。
鼠标悬停时图片放大但不挤占其他元素位置
直接用 transform: scale() 是最轻量的方案，但很多人发现放大后周围布局会抖动或错位——这是因为默认的缩放中心点在左上角。必须显式设置 transform-origin 为 center，否则图片会向右下“平移式”放大，视觉上像被推开。
实操建议：
- 给图片容器（如
<div>或<figure>）设固定宽高，并设overflow: hidden，避免放大后边缘溢出 - 图片本身设
display: block，消除默认的底部空白（由 inline 元素基线引起） - 过渡动画加在容器上，而非图片上，更稳定：
transition: transform 0.3s ease - 悬停规则写在容器的
:hover上，触发transform: scale(1.2)
放大时保持清晰、不模糊
高清屏（Retina / HiDPI）下，scale() 放大容易出现像素糊化，尤其对小尺寸 PNG 或未优化的 JPG。这不是 CSS 问题，而是浏览器对非整数倍缩放的渲染限制。
关键应对点：
立即学习“前端免费学习笔记（深入）”；
- 优先使用原图分辨率 ≥ 目标显示尺寸 × 1.5，比如最终显示 300px 宽，原图至少 450px 宽
- 添加
image-rendering: -webkit-optimize-contrast和image-rendering: crisp-edges，强制浏览器用 nearest-neighbor 插值（对图标/线条图有效） - 避免对
<img>直接设width/height缩放后再scale()—— 双重缩放会加剧失真
兼容老版本 Safari 和移动端 touch 设备
iOS Safari 12.2 之前不支持对 <img> 元素的 transform 硬件加速，会导致卡顿；而纯 :hover 在 iOS 上基本无效（无真正 hover 状态）。
稳妥做法：
- 对移动端，改用
touchstart+touchendJS 切换 class（例如加is-hovered），再用该 class 控制transform - 强制开启 GPU 加速：给容器加
transform: translateZ(0)或will-change: transform（慎用，别滥用will-change） - Safari 旧版若仍有模糊，可尝试用
-webkit-transform: scale(1.2)做前缀兜底（现代已无需）
与图片懒加载（lazy loading）共存时的常见陷阱
用 loading="lazy" 的 <img> 在首次进入视口前是空尺寸，此时如果父容器依赖图片撑开高度，:hover 动画可能错位甚至失效。
必须处理的细节：
- 给
<img>显式设width和height属性（不是 CSS），让浏览器预留正确长宽比 - 若用
aspect-ratio，确保目标浏览器支持（Chrome 88+，Firefox 89+，Safari 15.4+）；不支持时 fallback 到 padding-bottom 技巧 - 不要把
transform动画写在<img>上并依赖其自然加载完成——应始终作用于有确定尺寸的容器
scale() 本身，而在它前面的布局基础没打牢。 
