直接给img加transform: scale()会偏移，因缩放默认以左上角为原点，导致放大时右下部分“伸出去”；必须显式设置transform-origin: center，否则高dpr屏幕易出现像素级错位和边缘模糊。
为什么直接给 img 加 transform: scale() 会偏移？
因为缩放默认以元素左上角为原点，图片一放大，右下部分就“伸出去”，视觉上像整体右下位移。这不是 bug，是 transform 的行为规范。必须显式写 transform-origin: center;，哪怕文档说“默认是 center”，也得亲手加——尤其在高 DPR 屏幕（如 iPhone）上，不写容易出现像素级错位和边缘模糊。
九宫格容器必须用 grid 还是 flex？
优先用 display: grid。它天然支持二维布局，三行三列只需两行声明，且能精准控制每个格子的尺寸、间距和对齐，避免 flex 在换行或内容高度不一时产生的错位问题。
关键配置：
-
grid-template-columns: repeat(3, 1fr);和grid-template-rows: repeat(3, 1fr);—— 确保等分，不依赖内容撑开 -
gap: 8px;—— 替代 margin，避免塌陷和重叠 - 每个格子（
.grid-item）设固定宽高或aspect-ratio: 1 / 1;，防止缩放时拉伸变形
放大时图片溢出、文字被顶开、滚动条意外出现？
根本原因是溢出未裁剪 + 行内元素基线间隙。解决方案不是调 scale 值，而是结构层控制：
- 每张图必须包一层
<div class="img-wrapper">，该 wrapper 设 <code>overflow: hidden;—— 注意：不是加在img上，也不是加在九宫格容器上，而是**直接父容器** -
img必须设display: block;，否则底部有基线间隙，放大后高度突变，会顶开相邻元素 - 禁用
width: 100%; height: auto;组合，改用width: 100%; height: 100%; object-fit: cover;，确保缩放前后比例稳定 - 用
@media (hover: hover)包裹所有:hover样式，让移动端默认不加载这些规则 - 保留基础缩放逻辑（如
.img-wrapper:active img），让点击瞬间有反馈 - 如果必须强交互，就得用 JS 监听
touchstart并切换 class —— 但注意：别在mousemove或touchmove里做缩放计算，不节流会卡顿
移动端点一下没反应，:hover 失效怎么办？
iOS Safari 和多数安卓浏览器不支持持续 :hover，首次点击只模拟一次悬停，第二次才可能触发。纯 CSS 无法修复，但可降级兼容：
真正难调的不是放大倍数，而是 transform-origin 在不同设备像素比下的渲染对齐。接受它，比硬抗更实际。
