CSS中两种放大zoom和scale的区别

最新推荐文章于 2025-06-02 09:49:53 发布

原创最新推荐文章于 2025-06-02 09:49:53 发布 · 3.9w 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#css #zoom #scale

leon前端进阶之路同时被 2 个专栏收录

70 篇文章

订阅专栏

css基础

19 篇文章

订阅专栏

本文探讨了CSS中的zoom和scale属性在元素缩放上的差异。通过实际案例对比了这两种方法的效果，包括它们对元素布局的影响及如何调整基点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

####欢迎访问我的个人博客 http://xiaolongwu.cn/

先说原理

zoom和scale这两个东西都是用于对元素的缩放，但两者除了兼容性之外还有一些不同的地方。

zoom缩放会将元素保持在左上角，而scale默认是中间位置，可以通过transform-origin来设置。

另外他们执行的渲染顺序也不同zoom可能影响到盒子的计算。

我们看个例子

这是几行伪代码

   <style>
	div {
	 	 width:300px;height:100px;
	  border:1px solid red;
	  font-size:0px;
	  line-height:100px;
	  margin:10px;
	}
	span {
	  display:inline-block;
	  height:80px;width:200px;background:blue;
	  vertical-align:middle;
	  overflow:hidden;
	}
	</style>

<div>
  <span style="-webkit-transform:scale(0.5);"></span>
</div>
<div>
  <span style="
    -webkit-transform-origin:top left;
    -webkit-transform:scale(0.5);
  "></span>
</div>
<div>
  <span style="zoom:0.5;">
  </span>
</div>