鼠标悬停图片放大失效主因是父容器overflow:hidden未预留空间或图片display:inline导致基线干扰；应设父容器固定尺寸、图片display:block、transform:scale(1.2)配合transition及transform-origin:center，并用@media(hover:hover)适配移动端。
鼠标悬停时图片放大不生效？检查 transform 和 overflow 配合问题
直接写 transform: scale(1.2) 往往没反应，大概率是父容器设置了 overflow: hidden 但没预留放大空间，或者图片被包裹在默认 display: inline 的元素里导致基线对齐干扰缩放中心。scale 变换默认以元素自身中心为原点，如果父容器太紧、或图片行内布局有空白间隙，放大后会被裁切或抖动。
- 确保图片父容器（比如
<div>）设了overflow: hidden且尺寸固定，否则放大后会撑开布局 - 图片本身设
display: block，消除行内元素底部默认留白，避免悬停时“跳动” - 加
transition: transform 0.3s ease让放大平滑，否则是瞬时切换
如何让放大以图片中心为准，而不是左上角？
scale 默认就是以元素的 transform-origin 为中心缩放，而该属性默认值是 50% 50%（即中心），所以一般不用改。但如果你发现放大偏移，大概率是图片外层有 padding、margin 或父容器用了 flex/align-items 导致视觉中心偏移。
- 显式写
transform-origin: center更稳妥，尤其当图片被设了border或padding - 避免在图片上直接设
margin，改用父容器控制间距 - 若用
flex布局包裹图片，确认align-items和justify-content没意外拉偏位置
移动端 touch 设备下 hover 不触发？得补一层 focus-visible 或媒体查询
纯 :hover 在 iOS Safari 和部分安卓浏览器中，只对可聚焦元素（如 <a>、<button>）有效，img 默认不可聚焦，所以悬停放大在手机上可能完全不响应。
- 给图片加
tabindex="0"，让它能获得焦点，再配合:hover, :focus双状态 - 更稳妥的做法：用
@media (hover: hover) and (pointer: fine)包裹 hover 样式，对触屏设备降级为点击展开（或干脆不启用） - 别依赖 hover 做核心功能，它本质是增强体验，不是交互主路径
放大后边缘模糊？和 image-rendering 与像素比有关
scale 放大本质是 CSS 渲染拉伸，原图分辨率不够时会出现锯齿或发虚，尤其在高 DPI 屏幕（如 MacBook Retina、高端安卓机）上更明显。
立即学习“前端免费学习笔记（深入）”；
- 优先用更高分辨率原图，比如设计稿标 2x 尺寸，HTML 中仍写原始宽高，靠 CSS 控制显示大小
- 加
image-rendering: -webkit-optimize-contrast或image-rendering: crisp-edges强制浏览器用 nearest-neighbor 插值（适合图标类）；但对照片类可能更糊，慎用 - 避免对 <img> 直接设
width/height缩放后再用 scale 放大——这是双重缩放，画质损失叠加
