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 上檢視此頁面 • 報告此內容問題