缩放与调整 ( zoom、resize )

CSS 除了标准改变尺寸的样式，也有一些较为特别的样式属性可以“改变尺寸”，分别是 zoom 和 resize，zoom 可以改变元素整体的尺寸，resize 则可以让用户手动拖拉改变指定元素尺寸，这篇教学会介绍这些样式属性的用法，还会分析 zoom 和 scale 的用法差异。

快速导览：

• 缩放 zoom
• 手动调整尺寸 resize

教学影片

搭配教学影片一起阅读，效果会更好！欢迎大家订阅 STEAM 教育学习网的 Youtube 频道。

前往：https://www.youtube.com/@steam.oxxostudio

缩放 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 样式属性，可以再不更动其他样式属性的状况下，快速调整元素的尺寸，或手动拖拉改变尺寸，是满有趣的样式属性。

意见反馈