缩放

基线 2024

新发布

自 2024 年 5 月起，此功能适用于最新的设备和浏览器版本。此功能可能无法在较旧的设备或浏览器中使用。

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

zoom CSS 属性会缩放目标元素，这会影响页面布局。缩放时，缩放元素会从 top 和 center 缩放，前提是使用默认的 writing-mode。

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

语法

css
/* Keyword values */
zoom: normal;
zoom: reset;

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

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

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

值

normal

以正常大小呈现此元素。

reset

如果用户对文档应用非捏合式缩放（例如，通过按 Ctrl - - 或 Ctrl + + 键盘快捷键），则不要对此元素进行（反）放大。不要使用此值，请改用标准的 unset 值。

<percentage>

缩放因子。100% 等效于 normal。大于 100% 的值放大。小于 100% 的值缩小。

<number>

缩放因子。等效于相应的百分比（1.0 = 100% = normal）。大于 1.0 的值放大。小于 1.0 的值缩小。

正式定义

初始值normal
适用于所有元素
继承否
计算值按指定
动画类型一个 <integer>

正式语法

zoom =
  normal | reset | <number> | <percentage>

示例

调整段落大小

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

HTML

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

CSS

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 块中，定义了一个 select 字段，其中包含要使用的不同 zoom 值。

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);
}

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

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

JavaScript

此 JavaScript 监听 select 字段的变化，并在内容 section 上设置 --zoom-level 的新值，例如 style="--zoom-level: 1.5;"。

js
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-property

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参见