zoom

Baseline 2024

新推出

自 2024 年 5 月以来，此功能已在最新设备和浏览器版本中可用。此功能可能不适用于较旧的设备或浏览器。

zoom CSS 属性可用于控制元素的放大级别。transform: scale() 可以用作此属性的替代方案。

zoom CSS 属性会缩放目标元素，这可能会影响页面布局。当缩放时，如果使用默认的 writing-mode，缩放的元素会从 top 和 center 开始缩放。

相比之下，使用 scale() 缩放的元素不会导致布局重新计算或移动页面上的其他元素。如果使用 scale() 导致内容大于包含元素，则 overflow 会生效。此外，使用 scale() 调整的元素默认从 center 变换；这可以通过 transform-origin CSS 属性进行更改。

语法

css

/* <percentage> values */
zoom: 50%;
zoom: 200%;

/* <number> values */
zoom: 1.1;
zoom: 0.7;

/* Non-standard keyword values */
zoom: normal;
zoom: reset;

/* Global values */
zoom: inherit;
zoom: initial;
zoom: revert;
zoom: revert-layer;
zoom: unset;

值

<percentage>: 缩放因子。100% 等同于 normal。大于 100% 的值放大。小于 100% 的值缩小。
<number>: 缩放因子。等同于相应的百分比（1.0 = 100% = normal）。大于 1.0 的值放大。小于 1.0 的值缩小。

不推荐使用两个非标准关键字值。请查看浏览器兼容性数据

normal: 以其正常大小渲染元素；等于 zoom: 1。请改用全局 unset 关键字值。
reset: 将值重置为 zoom: 1，并防止用户在对文档应用非捏合缩放（例如，通过按下 Ctrl - - 或 Ctrl + + 键盘快捷键）时，元素被（取消）放大。

正式定义

初始值	`1`
应用于	所有元素
继承性	否
百分比	转换为 `<number>`
计算值	按指定，但 `<percentage>` 转换为等效的 `<number>`
动画类型	不可动画化

正式语法

zoom = 
  <number [0,∞]>      |
  <percentage [0,∞]>

示例

调整段落大小

在此示例中，段落元素被缩放，当鼠标悬停在段落上时，zoom 值被 unset。

HTML

html

<p class="small">Small</p>
<p class="normal">Normal</p>
<p class="big">Big</p>

CSS

body {
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: 100vh;
}

css

.small {
  zoom: 75%;
}
.normal {
  zoom: normal;
}
.big {
  zoom: 2.5;
}
p:hover {
  zoom: unset;
}

结果

调整元素大小

在此示例中，div 元素使用 normal、<percentage> 和 <number> 值进行缩放。

HTML

html

<div id="a" class="circle"></div>
<div id="b" class="circle"></div>
<div id="c" class="circle"></div>

CSS

css

div.circle {
  width: 25px;
  height: 25px;
  border-radius: 100%;
  vertical-align: middle;
  display: inline-block;
}
div#a {
  background-color: gold;
  zoom: normal; /* circle is 25px diameter */
}
div#b {
  background-color: green;
  zoom: 200%; /* circle is 50px diameter */
}
div#c {
  background-color: blue;
  zoom: 2.9; /* circle is 72.5px diameter */
}

结果

创建缩放控件

在此示例中，使用 select 字段来更改元素的缩放级别。

HTML

在 HTML 的第一个块中，定义了一个带有不同 zoom 值以供使用的 select 字段。

html

<section class="controls">
  <label for="zoom"
    >Zoom level
    <select name="zoom" id="zoom">
      <option value="0.5">Extra Small</option>
      <option value="0.75">Small</option>
      <option value="normal" selected>Normal</option>
      <option value="1.5">Large</option>
      <option value="2">Extra Large</option>
    </select>
  </label>
</section>

在第二个块中，添加了一条不支持消息，如果浏览器支持 zoom，该消息将被隐藏。

html

<p class="zoom-notice">CSS zoom is not supported</p>

最后一个块只是定义了将被缩放的内容。

html

<section class="content">
  <h1>This is the heading</h1>
  <p>
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Placeat inventore
    ea eveniet, fugiat in consequatur molestiae nostrum repellendus nam
    provident repellat officiis facilis alias facere obcaecati quos sunt
    voluptas! Iste.
  </p>
  <p>
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Placeat inventore
    ea eveniet, fugiat in consequatur molestiae nostrum repellendus nam
    provident repellat officiis facilis alias facere obcaecati quos sunt
    voluptas! Iste.
  </p>
</section>

CSS

在 CSS 的第一个块中，我们使用自定义属性设置 --zoom-level 的起始值，然后将其用作内容块上 zoom 的值。

css

html {
  --zoom-level: normal;
}
.content {
  max-width: 60ch;
  margin: auto;
  zoom: var(--zoom-level);
}

.controls,
.zoom-notice {
  display: flex;
  justify-content: space-around;
}
.zoom-notice {
  color: red;
}

在最后的 CSS 块中，我们检查浏览器是否支持 zoom，如果支持，则将不支持消息设置为 display: none;。

css

@supports (zoom: 1) {
  .zoom-notice {
    display: none;
  }
}

JavaScript

此 JavaScript 监视选择字段中的更改，并为内容 section 上的 --zoom-level 设置新值，例如 style="--zoom-level: 1.5;"。

const zoomControl = document.querySelector("#zoom");
const content = document.querySelector(".content");
const updateZoom = () => {
  content.style = `--zoom-level: ${zoomControl.value}`;
};
zoomControl.addEventListener("change", updateZoom);

结果

规范

规范
CSS 视口模块级别 1 # zoom 属性

浏览器兼容性

另见

帮助改进 MDN

了解如何贡献

此页面由 MDN 贡献者于 2025 年 7 月 14 日最后修改。

在 GitHub 上查看此页面 • 报告此内容问题