根本原因是transform: scale()默认以左上角为原点缩放，导致布局塌陷和溢出；需加display: block、overflow: hidden、transform-origin: center，并仅过渡transform和opacity。
hover时图片突然跳动或布局塌陷
根本原因是transform: scale()默认以元素左上角为原点缩放，图片放大后会挤占周围空间，导致其他元素重排。更隐蔽的问题是：如果父容器没设overflow: hidden，放大的部分会溢出并可能遮挡相邻内容。
- 给图片加
display: block，消除行内元素默认的基线对齐留白 - 父容器必须设
overflow: hidden，裁掉超出部分 - 用
transform-origin: center让缩放以中心为基准，视觉更自然 - 避免在
img上直接写width/height，改用max-width: 100%保持响应式
CSS transition卡顿或不触发
常见于直接对transform加transition: all .3s——浏览器无法硬件加速所有属性，且all会让无关变化（比如color）也参与过渡，拖慢性能。
- 只过渡
transform和opacity这两个能触发GPU加速的属性：transition: transform .3s ease, opacity .3s ease - 确保图片有明确的
width和height（哪怕用aspect-ratio），否则缩放起始尺寸不稳定 - 不要在
:hover里同时改width/height和transform，这会强制重排+重绘
移动端hover失效或误触
手机没有“悬浮”概念，:hover在iOS/Android上要么不触发，要么点一下才激活、再点一下才取消，体验断裂。
- 用
@media (hover: hover) and (pointer: fine)包裹hover样式，只对鼠标设备生效 - 移动端改用
:active模拟点击放大：img:active { transform: scale(1.1); } - 若需统一交互，建议用JavaScript监听
touchstart/touchend，手动切换class
scale放大后图片模糊或锯齿
本质是浏览器对非整数倍缩放的像素插值问题，尤其在Retina屏上更明显。不是代码写错，而是渲染机制限制。
- 优先用原图尺寸略大于显示区域的图片（比如显示200px宽，提供400px宽原图）
- 加
image-rendering: -webkit-optimize-contrast（Safari）或image-rendering: crisp-edges（Firefox），但Chrome支持有限 - 避免
scale(1.05)这类微小放大，尽量用scale(1.1)、scale(1.2)等更整的值 - 真要高清，得用
background-image+background-size替代img标签，可控性更强
transform-origin和overflow: hidden这对组合——不加它们，效果看起来“差不多”，但一嵌进复杂布局就露馅。放大本身很简单，稳住它才花功夫。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
