transform: scale() 比 width/height 更适合悬停放大，因其只触发重绘或GPU加速，不引发重排；需配合 overflow: hidden、transform-origin: center、object-fit: cover 及明确宽高以避免抖动、溢出与跳变。
为什么 transform: scale() 比 width/height 更适合悬停放大
直接改 width 和 height 会触发重排（reflow），导致布局抖动、性能下降，尤其在图片密集的网格中明显卡顿；transform: scale() 属于合成层操作，只触发重绘（repaint）甚至 GPU 加速，动画更顺滑，且不影响其他元素流式布局。
关键点：scale() 默认以元素中心为原点缩放。如果没加 transform-origin，图片会从中心撑开，可能切掉边缘或露出背景——这点常被忽略。
- 必须设置
overflow: hidden在父容器上，否则放大后溢出可见 -
transform-origin推荐用center（默认值），避免偏移；若需左上角缩放，才显式设top left - 搭配
transition: transform 0.3s ease，别只写all，否则可能意外过渡其他属性
基础写法：单张图片悬停放大
最简可用结构是给 <img> 外包一层 <div> 容器，用于控制裁剪和定位。纯 <img> 标签自身设 transform 也可行，但放大后容易撑破父级。
<div class="img-container"> <img src="photo.jpg" alt="示例"> </div>
CSS 部分：
立即学习“前端免费学习笔记（深入）”；
.img-container {
width: 300px;
height: 200px;
overflow: hidden;
}
.img-container img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.img-container:hover img {
transform: scale(1.1);
}
-
object-fit: cover确保图片等比填充不拉伸，配合overflow: hidden才能干净裁剪 - 放大倍数建议控制在
1.05–1.2之间，1.3+容易糊或失真（尤其低分辨率图） - 不要对
<img>直接设display: block以外的显示模式，否则transform可能失效
解决常见错位：hover 时图片“突然跳一下”
这种跳动几乎全是因图片加载完成前占位高度为 0，或未设宽高导致文档流重排。浏览器渲染时先画空盒，图片加载后尺寸变化，再触发 hover 动画——视觉上就是一跳。
- 务必给
<img>或其容器声明明确的width和height（可使用aspect-ratio配合height: auto） - 避免用
max-width: 100%替代固定尺寸，它不提供高度约束 - 如用懒加载，提前在
loading="lazy"的同时设width/height属性（HTML 属性，非 CSS），让浏览器预留空间 - 检查是否有外部 CSS 注入了
vertical-align: baseline（<img>默认行为），在容器上加font-size: 0或line-height: 0消除基线间隙
兼容性与移动端注意事项
transform: scale() 在现代浏览器（Chrome 36+、Firefox 16+、Safari 9+、Edge 12+）完全支持，无需前缀。但 iOS Safari 对 transform 在 <img> 上的硬件加速较敏感——有时需要强制开启。
- 在
:hover规则里加transform: scale(1.1) translateZ(0)，translateZ(0)可触发 iOS 强制 GPU 渲染 - 移动端没有
:hover，需配合@media (hover: hover)做条件判断，或改用点击态（:active）替代 - 慎用过高的
transition时长（如 >0.4s），在低端安卓机上易出现“卡半帧”现象 - 如果页面有大量同类效果，考虑用
will-change: transform提前告知浏览器，但仅在必要时加，避免内存浪费
真正麻烦的不是写几行 CSS，而是放大后边缘像素模糊、小图被强行拉伸、或者 hover 区域和视觉区域不一致——这些都得靠实际图 + 真机反复调。
