CSS zoom 属性

定义和用法

zoom 属性指定元素的缩放比例。元素可以被放大或缩小。

实例

例子 1

对文本使用 zoom 属性：

p.a {
  zoom: normal;
}

p.b {
  zoom: 150%;
}

p.c {
  zoom: 0.6;
}

亲自试一试

例子 2

使用 zoom 属性调整元素大小：

div {
  border-radius: 100%;
  background: #73AD21;
  padding: 20px;
  width: 80px;
  height: 80px;
}

div.a {
  zoom: normal;
}

div.b {
  zoom: 150%;
}

div.c {
  zoom: 0.6;
}

亲自试一试

CSS 语法

zoom: normal|%|number|unset|initial|inherit;

属性值

值 描述
normal 默认值。元素以正常方式渲染。
%

以百分比指定缩放比例。

100% = 正常。

要放大，使用大于 100% 的值。

要缩小，使用小于 100% 的值。
number

以数字形式指定缩放比例（百分比）。

1.0 = 正常。

要放大，使用大于 1.0 的值。

要缩小，使用小于 1.0 的值。
unset 取消设置缩放比例（恢复为正常）。
initial 将此属性设置为其默认值。参阅 initial。
inherit 从其父元素继承此属性。参阅 inherit。

技术细节

默认值： normal
继承性： 否
动画制作： 支持。请参阅：动画相关属性。
版本： CSS Viewport Module Level 1
JavaScript 语法： object.style.zoom = "3"

浏览器支持

表格中的数字表示首个完全支持该属性的浏览器版本。

Chrome Edge Firefox Safari Opera
1 12 126 3.1 15.0