CSS box-sizing 和 aspect-ratio

雖然透過 CSS 的 width 和 height 可以很輕鬆的控制元素尺寸，但也時常會遇到邊界或邊框影響寬度，或無法等比例變化的狀況，這篇教學會介紹透過 box-sizing 定義寬高顯示方式，以及利用 aspect-ratio 根據比例調整寬高。

快速導覽：

• box-sizing 定義寬高顯示方式
• aspect-ratio 根據比例調整寬高

教學影片

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

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

box-sizing 定義寬高顯示方式

box-sizing 樣式屬性主要定義容器「寬度和高度的顯示方式」，通常在排版時，如果不希望 padding 或 border 影響容器尺寸，就會使用這個樣式屬性改變顯示方式，有兩個屬性值：

下方的範例使用不同的 box-sizing 屬性值，可以看出雖然寬高設定相同，但實際呈現的大小卻不同，class 為 b 的 div 因為設定了 box-sizing: border-box;，所以寬度和高度都包含了 padding 與 border 的寬度。

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

<!-- HTML 程式碼 -->
<div class="a"><span>oxxo<br/>( content-box )</span></div>
<div class="b"><span>apple<br/>( border-box )</span></div>

<!-- CSS 程式碼 -->
<style>
  div {
    width:150px;
    height:150px;
    border: 10px solid #000;
    margin: 10px;
    padding: 30px;
    float: left;      /* 靠左浮動排列 */
  }
  div span {
    background: yellow;
    padding: 0;
    margin: 0;
    border: none;
  }
  .a span {
    display: block;   /* .a 裡的 span 的顯示類型為 block */
    width: 150px;
    height: 150px;
  }
  .b {
    box-sizing: border-box;   /* .b 設定為 border-box */
  }
</style>

aspect-ratio 根據比例調整寬高

aspect-ratio 樣式屬性可以讓容器「根據指定的比例改變寬高」，沒有繼承特性，過去在動態調整寬高時，往往會借助百分比、CSS 的 calc() 函式搭配單位計算，甚至還得透過 JavaScript 動態計算，但自從 CSS 推出 aspect-ratio 樣式屬性後，單純透過 CSS 就可以根據比例調整寬高，是個十分方便的樣式屬性，屬性值有下列幾種寫法：

下方範例使用五個不設定寬度的 div ( 寬度自動適應外圍 main 元素 )，透過 aspect-ratio 根據比例產生對應高度，搭配 CSS 動畫效果，就能看出當父元素寬度發生變化時，內容也會根據比例呈現出對應的長寬比。

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

<!-- HTML 程式碼 -->
<main>
  <div class="a">1:1</div>
  <div class="b">4:3</div>
  <div class="c">2:1</div>
  <div class="d">16:9</div>
  <div class="e">3:4</div>
</main>

<!-- CSS 程式碼 -->
<style>
  main {
    width: 100px;
    animation: oxxo 2s infinite alternate;
  }
  div {
    border: 1px solid #000;
    margin: 10px;
  }
  .a {aspect-ratio: 1/1;}
  .b {aspect-ratio: 4/3;}
  .c {aspect-ratio: 2/1;}
  .d {aspect-ratio: 16/9;}
  .e {aspect-ratio: 3/4;}
  @keyframes oxxo {
    from {width: 100px;}
    to {width: 150px;}
  }
</style>

小結

box-sizing 和 aspect-ratio 雖然不是「必要」的樣式屬性，但往往能藉由改變顯示行為或固定比例的方式，讓排版更加得心應手，是非常方便好用的樣式屬性。

意見回饋

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