CSS zoom 縮放、resize 手動調整尺寸

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

快速導覽：

搭配教學影片一起閱讀，效果會更好！ 歡迎大家訂閱 STEAM 教育學習網的 Youtube 頻道 。

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

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

<!-- HTML 程式碼 -->
  <h2>不縮放</h2><h3>OXXO</h3>
  <h2 class="a">scale(2)</h2><h3>OXXO</h3>
  <h2 class="b">zoom:2</h2><h3>OXXO</h3>
  <h2 class="c">zoom:2</h2><h3>OXXO</h3>
<!-- 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;
    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>
必需搭配「具有明確寬高」的區塊容器元素或「可置換元素」( 例如 div、textarea、img、video、iframe )。
搭配元素的 overflow 屬性值不能是 visible ( 屬性值可為 auto、scroll 或 hidden )。
調整尺寸會影響版面佈局。
目前仍有部分瀏覽器不支援。
resize 具有下列屬性值：
預設值，禁止調整大小
允許水平與垂直調整
horizontal
vertical
block
邏輯屬性，垂直排列時，等同於 vertical。
inline
邏輯屬性，水平排列時，等同於 horizontal。
下方範例會使用三個 div，分別呈現「不能調整大小」、「已經設定但不能調整大小」和「設定後可以調整大小」的效果，特別注意使用 resize 之後會影響原本的版面佈局。
線上展示：https://codepen.io/oxxo/pen/KwpprbR
<!-- HTML 程式碼 -->
  <h2>不能手動調整尺寸</h2>
<div class="a">
  <h2>設定 resize 但無法手動調整尺寸</h2>
<div class="b">
  <h2>設定 resize 和 overflow，可手動調整尺寸</h2>
<h3>看看我會不會被影響<h3>
<!-- CSS 程式碼 -->
<style>
  div {
    border: 2px solid #000;
    width: 220px;
    height: 100px;
    margin: 10px;
  h2 {margin: 0;}
    resize: both;  /* 因為 overflow 預設 visible，單純設定 resize 無法調整 */
    overflow: auto;
    resize: both;  /* 修改 overflow */
</style>