縮放 zoom、手動調整尺寸 resize

CSS 除了標準改變尺寸的樣式，也有一些較為特別的樣式屬性可以「改變尺寸」，分別是 zoom 和 resize，zoom 可以改變元素整體的尺寸，resize 則可以讓使用者手動拖拉改變指定元素尺寸，這篇教學會介紹這些樣式屬性的用法，還會分析 zoom 和 scale 的用法差異。

快速導覽：

• 縮放 zoom
• 手動調整尺寸 resize

縮放 zoom

zoom 樣式屬性可以「設定元素的縮放比例」，最初只有 IE 所支援，後來其他瀏覽器也逐漸支援，zoom 會讓元素的所有內容一起進行縮放，包含文字、排版、圖片等，zoom 和 transform: scale() 相似，但作用方式仍有下列差異：

下方列出 zoom 的屬性值：

下方範例使用不同的 div 呈現 zoom 和 transform: scale() 的效果，特別注意當元素使用 zoom 後會佔有實際空間，進而影響整體排版佈局，且縮放參考點為左上角，而 transform: scale() 只有視覺效果，並不佔有實際空間也不影響整體排版佈局，預設變形參考點為中心點，此外，範例中也加入 hover 後的轉場效果，使用 zoom 的元素並不會呈現轉場效果，就算搭配 @property 自訂屬性，也只能支援部分效果。

• 參考：CSS @property 自訂屬性值
• 線上展示：https://codepen.io/oxxo/pen/QwbbJgM

<!-- HTML 程式碼 -->
<div>
  <h2>不縮放</h2><h3>OXXO</h3>
</div>
<div>
  <h2 class="a">scale(2)</h2><h3>OXXO</h3>
</div>
<div>
  <h2 class="b">zoom:2</h2><h3>OXXO</h3>
</div>
<div>
  <h2 class="c">zoom:2</h2><h3>OXXO</h3>
</div>

<!-- CSS 程式碼 -->
<style>
  @property --c {
    syntax: "<number>";
    inherits: false;
    initial-value: 2;
  }
  div {
    border: 2px solid #000;
    width: 250px;
    height: 120px;
    margin: 10px 100px;
  }
  h2, h3 {
    margin: 0;
    border: 3px dashed red;
    background: #0a05;
  }
  h2 {
    width: 200px;
    background: #f003;
    transition: 1s, 1s --c;        /* 轉場效果額外指定自訂屬性 --c */
  }
  .a {transform: scale(2);}        /* 使用 scale() 放大兩倍 */
  .a:hover {transform: scale(1);}
  .b {zoom: 2;}                    /* 使用 zoom 放大兩倍 */
  .b:hover {zoom: 1;}
  .c {zoom: var(--c);}             /* 使用 zoom 搭配自訂屬性放大兩倍 */
  .c:hover {--c: 1;}
</style>

手動調整尺寸 resize

resize 樣式屬性可以控制使用者「是否可以透過滑鼠調整元素尺寸」，使用時有下列注意事項：

• 必需搭配「具有明確寬高」的區塊容器元素或「可置換元素」( 例如 div、textarea、img、video、iframe )。
• 搭配元素的 overflow 屬性值不能是 visible ( 屬性值可為 auto、scroll 或 hidden )。
• 調整尺寸會影響版面佈局。
• 目前仍有部分瀏覽器不支援。

resize 具有下列屬性值：

下方範例會使用三個 div，分別呈現「不能調整大小」、「已經設定但不能調整大小」和「設定後可以調整大小」的效果，特別注意使用 resize 之後會影響原本的版面佈局。

線上展示：https://codepen.io/oxxo/pen/KwpprbR

<!-- HTML 程式碼 -->
<div>
  <h2>不能手動調整尺寸</h2>
</div>
<div class="a">
  <h2>設定 resize 但無法手動調整尺寸</h2>
</div>
<div class="b">
  <h2>設定 resize 和 overflow，可手動調整尺寸</h2>
</div>
<h3>看看我會不會被影響<h3>
  
<!-- CSS 程式碼 -->
<style>
  div {
    border: 2px solid #000;
    width: 220px;
    height: 100px;
    margin: 10px;
  }
  h2 {margin: 0;}
  .a {
    resize: both;  /* 因為 overflow 預設 visible，單純設定 resize 無法調整 */
  }
  .b {
    overflow: auto;
    resize: both;  /* 修改 overflow */
  }
</style>

小結

透過 zoom 和 resize 樣式屬性，可以再不更動其他樣式屬性的狀況下，快速調整元素的尺寸，或手動拖拉改變尺寸，是滿有趣的樣式屬性。

意見回饋

如果有任何建議或問題，可傳送「意見表單」給我，謝謝～