必须配合transform-origin: center和overflow: hidden才能实现稳定居中缩放，否则默认左上角缩放导致偏移、溢出撑开布局；还需display: block消除基线间隙、transition: transform平滑过渡，并用@media(hover:hover)适配移动端。
直接用 transform: scale() 就能实现，但只写这一句大概率出问题：图片会偏移、周围内容抖动、移动端失效、甚至被其他元素盖住。
为什么图片悬停后往右下跑？
因为 scale() 默认以元素左上角为原点缩放。图片一放大，右下部分就“伸出去”了，视觉上就像整体位移。
- 必须显式加
transform-origin: center;，让缩放中心落在图片正中 - 如果父容器没设宽高，
center可能不准——建议给父容器设固定尺寸或aspect-ratio - 别依赖浏览器默认值，哪怕文档说“默认是 center”，也亲手写上更稳妥
为什么旁边文字被顶开或出现滚动条？
缩放本身不改变文档流，但溢出部分若没裁剪，就会撑破布局或触发 overflow: auto。
- 图片的**直接父容器**必须加
overflow: hidden;（不是给img自己加） -
img要设display: block;，否则行内元素底部有基线间隙，放大时高度突变 - 避免用
width: 100%+height: auto的组合——缩放后比例失真，建议用object-fit: cover配固定容器尺寸
为什么 hover 在手机上点一下没反应？
iOS Safari 和多数安卓浏览器不支持持续 :hover，首次点击只模拟一次 hover，第二次才可能触发，体验断裂。
立即学习“前端免费学习笔记（深入）”；
- 纯 CSS 方案里，可同时写
:hover, :active，让触摸时短暂生效：.img:hover, .img:active { transform: scale(1.1); } - 但更可靠的做法是放弃 hover 逻辑，改用 JS 监听
touchstart/click触发 class 切换 - 若必须兼容旧 Safari（iOS 12 及更早），记得加
-webkit-transform前缀
为什么 z-index 设了还是被盖住？
不是数值不够大，而是层叠上下文（stacking context）被意外创建，导致 z-index 失效。
- 所有图片都得加
position: relative;，否则z-index不起作用 - 悬停时除了
scale()，还要加z-index: 999;（注意：不能写999px） - 检查父容器是否用了
transform、opacity < 1或filter——这些都会创建新层叠上下文，隔离子元素的 z-index 比较
真正难调的不是 scale 值，而是 transform-origin 在不同 DPR 屏幕下的像素对齐——比如 iPhone 上放大后边缘轻微模糊，这不是 bug，是渲染机制决定的，靠 will-change: transform 也压不住，得接受它。
