图片悬停放大应使用 transform: scale() 而非 width/height，避免重排、实现 GPU 加速；需设 display: block、transition 写在常态、合理设置 transform-origin 和 overflow: hidden，并注意高清源图与高 DPI 兼容性。
图片悬停放大必须用 transform: scale() 而不是 width/height
直接改 width 或 height 会触发重排（reflow），动画卡顿且无法硬件加速；transform: scale() 只触发重绘（repaint），配合 GPU 加速，更顺滑。浏览器对 transform 和 opacity 的过渡优化最成熟。
- 必须给图片设置
display: block或清除父容器的默认行内间隙，否则缩放时可能上下跳动 - 避免在
width/height内联样式，优先用 CSS 控制尺寸，保证缩放基准一致 - 如果图片是响应式（比如
max-width: 100%），缩放后可能溢出容器，需配合overflow: hidden在父元素上
transition 属性要写在默认状态，不是 :hover 里
把 transition 放在常态样式中，才能同时控制“进入”和“离开”两个方向的动画。只写在 :hover 里会导致鼠标移出时立刻回弹、无过渡。
img {
display: block;
transition: transform 0.3s ease-in-out;
}
img:hover {
transform: scale(1.1);
}- 推荐用
ease-in-out，比linear更自然；0.2s–0.4s是较舒服的时长，太短像闪，太长显拖沓 - 不要写
transition: all 0.3s—— 会意外过渡其他属性（比如border变化），增加渲染负担 - 如果需要更精细控制，可分开写：
transition-property: transform+transition-duration+transition-timing-function
放大中心点默认是图片中心，想改就用 transform-origin
默认 transform-origin: 50% 50%（即居中），所以 scale(1.1) 是从正中心等比撑开。如果想从左上角放大，或让图片“浮起”效果，就得调整原点。
img {
transition: transform 0.3s ease;
transform-origin: top left; /* 从左上角开始缩放 */
}
img:hover {
transform: scale(1.1);
}- 常用值：
center center（默认）、top left、bottom center、10px 20px（支持像素偏移） - 若父容器有
overflow: hidden，transform-origin靠边时容易切掉边缘，注意预览实际裁剪效果 - 移动端 Safari 对
transform-origin在某些嵌套场景下兼容性略弱，简单布局没问题
别忽略高 DPI 屏幕下的模糊问题
用 transform: scale() 放大后，部分浏览器（尤其是 Chrome）会对非整数倍缩放的图片做插值处理，导致轻微模糊。这不是 bug，是抗锯齿行为。
立即学习“前端免费学习笔记（深入）”；
- 如果图片本身分辨率足够（比如 2x 图），模糊感不明显；小图放大越狠，越容易糊
- 可尝试加
image-rendering: -webkit-optimize-contrast或image-rendering: crisp-edges强制锐化，但兼容性有限，且可能让边缘生硬 - 真正可靠的解法：提供更高清源图，或用 SVG / 图标字体替代位图
实际项目里最容易被忽略的是父容器的 overflow 和图片的 display 行为——这两个不调好，再顺滑的 transform 也会看起来“抖”或者“错位”。
