CSS 图片放大看着只是"鼠标悬停变大一圈"，但用什么属性决定了两件后果完全不同的事：会不会顶开周围元素，以及图片会不会糊。MDN 对 zoom 与 transform: scale() 给了逐句对照的官方说明，本文据此整理。

一、两者最关键的区别：是否触发重排

MDN 的 zoom 属性页（实测 200）原文写得很清楚："The zoom CSS property scales the targeted element, which can affect the page layout." 并紧接着对比："an element scaled using scale() will not cause layout recalculation or move other elements on the page."

也就是说，用 zoom 会让图片真的占据更大空间、把相邻卡片挤走；用 scale() 则只在视觉上放大，元素占据的布局盒不变、邻居纹丝不动。做列表悬停效果时想要"浮起来压住旁边"的观感，必须用 scale() 配合层级与阴影，否则会整屏跳动。

二、放大基准点不同：中心与顶部居中

同一页继续说明：zoom 元素 "scales from top and center when using the default writing-mode"，而用 scale() 的元素 "transform from the center by default; this can be changed with the transform-origin CSS property"。所以默认状态下两者放大原点就不一样：zoom 靠上、scale 居中。想让 scale 从某个角放大，就显式写 transform-origin: top left 之类。

三、超出容器怎么办

官方补了一句常被忽略的话："If using scale() makes the contents larger than the containing element, then overflow comes into effect." 因为布局盒没变，放大部分是溢出，父级若没留余地就会被裁掉。常见解法：列表容器给 overflow: visible，或用 padding 预留放大空间；做九宫格相册时给每个格子留 1.05 倍的空隙。

四、scale 的语法与等比规则

MDN 的 scale() 页 给出形式 scale(sx) 与 scale(sx, sy)，参数为 <number> 或 <percentage>；官方明确 "If not defined, its default value is sx, resulting in a uniform scaling that preserves the element's aspect ratio"，即只写一个值时横纵同倍、不会变形。官方示例包括 transform: scale(1.3, 0.4) 与 scale(-0.5, 1)（负值翻转）。还提示 "function only scales in 2D. To scale in 3D, use scale3d()"。

五、图片放大会发虚的真正原因

scale 只是把已解码位图按矩阵拉伸，不重新取更高分辨率的原图，放大倍数超过"物理像素比"就必然出现锯齿与涂抹感。缓解手段有三：一是原图按 2 倍尺寸提供，配合 srcset 或 image-set() 让浏览器按设备像素比选图；二是把放大倍数控制在合理区间，一般不超过 2 倍；三是给容器加 will-change: transform 提示合成层，避免每帧重绘。

六、标准性与兼容性

MDN 对 zoom 标注："This feature works across the latest devices and browser versions. This feature might not work in older devices or browsers." 且语法里 zoom: normal、zoom: reset 被归为 Non-standard keyword values。历史事实是 zoom 长期是 WebKit/Blink 的私有扩展，Firefox 早年不支持。结论：能用 scale() 解决的优先用 scale()，它是标准属性且跨引擎行为一致；确有整体页面缩放这类需求再考虑 zoom，并在关键布局上做好降级。

七、悬停放大的稳妥写法

把放大做在图片上而不是整卡片上，能避免阴影与圆角一起被拉伸：

.card { overflow: hidden; }
.card img { transition: transform .35s ease; }
.card:hover img { transform: scale(1.08); }

注意三点：transition 要写在 transform 所在的那个元素上；容器用 overflow:hidden 把放大部分裁成"窗内放大"效果，反而不会有溢出问题；触屏没有可靠 hover，需为移动端另做点击态，否则效果在手机上等于不存在。

八、总结

选择依据是：需要真正改变占位、连带重排时用 zoom（官方确认 it can affect the page layout，但存在老浏览器兼容问题）；只做视觉放大、不动邻居时用 transform: scale()（不会引起重排，默认中心放大，可用 transform-origin 改原点，超出容器受 overflow 影响）；scale 单参数等比不变形；清晰度靠更高密度原图与 srcset，而不是靠放大属性；配合 transition 与容器 overflow:hidden 才不会有跳动与溢出。另外触屏无 hover，需单独设计移动态。

• css
• transform
• 图片
• 悬停