加了 transform: scale(1.2) 往左上偏移是因为默认以左上角为原点缩放；应添加 transform-origin: center 并写在 :hover 规则中，同时图片需设 transition: transform 0.3s ease（写在非悬停态），必要时加 translatez(0) 防模糊。
鼠标悬停时图片只缩放、不位移，为什么加了 transform: scale(1.2) 却往左上角偏移？
因为 transform 默认以元素左上角为原点缩放。图片放大后，左上角不动，右下部分被“撑出”容器，视觉上就像往左上挤。解决方法是显式设置缩放原点：transform-origin: center。这个值必须和 transform 一起用才生效，且建议写在悬停规则里（避免影响默认状态）。
- 如果父容器有
overflow: hidden，缩放后超出部分会被裁剪，此时原点位置更关键 - 不要写成
transform-origin: 50% 50%—— 虽然等价，但center更直观、兼容性更好 - 若图片是行内元素（如未设
display: block），缩放可能触发基线对齐错位，建议统一加vertical-align: top
如何让缩放平滑、不闪跳，且兼容老浏览器？
transition 必须作用在「非悬停态」的图片上，而不是只写在 :hover 里。否则首次悬停会无动画（从无 transition 突然变为有）。过渡属性推荐锁定 transform，避免连带 opacity 或 width 一起动导致重排。
- 写法：给图片加
transition: transform 0.3s ease，:hover里只改transform - 别用
transition: all 0.3s—— 会监听所有变化，拖慢性能，还可能意外触发其他属性动画 - IE10+ 支持
transform和transition，但 IE9 及以下需降级：可加filter: progid:DXImageTransform.Microsoft.Matrix(...)，但实际项目中通常直接放弃支持
图片缩放后模糊，是 CSS 问题还是图片本身分辨率不够？
两者都可能。CSS 缩放本质是拉伸像素，原图分辨率低时，scale(1.2) 会让模糊更明显。但即使高清图，Chrome/Firefox 在 subpixel 渲染下也可能轻微发虚 —— 这时可尝试开启硬件加速绕过光栅化缺陷。
- 在悬停的
transform中追加translateZ(0)或scaleZ(1)，例如：transform: scale(1.2) translateZ(0) - 慎用
will-change: transform—— 它会提前创建合成层，但滥用会导致内存占用上升，仅在复杂动画场景考虑 - 真正根治方法仍是提供足够大的原图（比如设计稿要求缩放 1.2 倍，图片尺寸就按 120% 准备），再通过
max-width: 100%限制显示大小
移动端 touch 设备上悬停失效，怎么补救？
手机没有「悬停」概念，:hover 伪类在 iOS/Android 浏览器中行为不一致（比如 Safari 只在点击后短暂触发）。不能依赖 :hover 实现核心交互，缩放效果应作为增强而非功能前提。
- 若必须支持触摸反馈，改用 JavaScript 监听
touchstart给元素加临时 class，再用该 class 触发缩放 - 更轻量的做法：在
@media (hover: hover)媒体查询内写 hover 动画，确保触屏设备完全忽略这段 CSS - 注意：部分安卓 WebView 对
transform的 touch 响应有延迟，可加touch-action: manipulation提升点击响应速度
transition 写在 hover 规则里 —— 那样第一次悬停永远没动画。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
