图片hover缩放抖动因布局重排，应设父容器overflow:hidden、图片display:block并显式定义transform-origin；需在常态加transition而非仅:hover；移动端需用@media或JS替代:hover。
hover 触发缩放时图片突然位移或布局抖动
直接写 transform: scale(1.2) 在 :hover 里，图片放大后会挤占周围空间，导致其他元素跳动。这不是预期的“悬浮特效”，而是布局重排问题。
根本原因是默认情况下 transform 不影响文档流，但若父容器没设 overflow: hidden，放大后的图片会溢出并撑开容器（尤其当图片在 inline 或 inline-block 上下文中）。
- 给图片外层加一层
<div>容器，并设overflow: hidden - 确保图片本身设为
display: block，消除行内元素默认的基线对齐留白 - 推荐用
transform-origin: center显式指定缩放中心，避免不同浏览器默认行为差异
scale 缩放不平滑、有卡顿感
只写 transform: scale(1.2) 没加过渡，浏览器会硬切，肉眼可见“啪”一下变大。不是 bug，是缺了动画声明。
transition 必须作用在「非 hover 状态」的原始元素上，而不是只写在 :hover 里——否则鼠标移入有动画，移出就瞬间回弹。
立即学习“前端免费学习笔记（深入）”；
- 在原始图片样式中加上
transition: transform 0.3s ease - 避免用
all 0.3s，它会把所有属性都过渡，可能意外触发重排（比如width变化） - 如果缩放后边缘模糊，加
will-change: transform提前提示浏览器启用 GPU 渲染（仅在复杂页面中必要）
在 Flex/Grid 布局中 hover 缩放失效或错位
Flex 项默认 align-items: stretch，Grid 项默认按轨道尺寸拉伸。此时 scale() 放大后，容器仍按原始尺寸分配空间，导致视觉错位甚至裁剪。
关键不是改 scale，而是控制父容器如何“容纳”缩放态。
- Flex 容器加
align-items: flex-start或align-items: center，避免子项被拉高 - Grid 项加
align-self: start，防止被轨道高度约束 - 更稳妥的做法：缩放前先用
transform: translateZ(0)强制创建独立图层（兼容老版 Chrome/Safari）
移动端 hover 无法触发，缩放没反应
手机和平板没有“悬停”概念，:hover 在触摸设备上基本不可靠——iOS Safari 默认延迟 300ms 后才模拟 hover，且只在第一次点击后短暂生效。
纯 CSS 方案在移动端本质是失效的。必须换思路：
- 用
@media (hover: hover) and (pointer: fine)媒体查询，只对支持悬停的设备启用:hover - 移动端改用
:active模拟点击反馈：img:active { transform: scale(0.95); } - 真要一致交互？得上 JS 监听
touchstart/touchend切换 class，CSS 写.zoomed { transform: scale(1.2); }
img {
display: block;
transition: transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
transform-origin: center;
}
img:hover {
transform: scale(1.15);
}
缩放值别超过 1.3，再大容易糊；贝塞尔曲线比 ease 更顺滑；移动端那块逻辑，往往得单独处理，不能指望一行 CSS 全端通吃。 
