aspect-ratio：等比例縮放區塊的屬性來了！

開發的時候常常遇到需要固定區塊比例的情境，而且通常長寬都不是絕對的數值。之前都是利用 padding 的特性去做等比例區塊。但現在有了更方便的 aspect-ratio，加上 vw/vh ，整理了 3 個可以使用的方法：

1. vw or vh

vw、vh分別指瀏覽器的寬度以及高度，這個方法在佈局比較簡單的行動版裝置上比較可行。
以下是一個長寬都是50%螢幕寬度的正方形：

.square-box {
    width: 50vw;
    height: 50vw;
}

2. padding + position

padding 有個特性——給予的值是百分比時，百分比的數值是基於父層元素的寬度、而不是元素本身。
假設現在需要一個 16:9 的區塊，可以這樣做：
透過
width: 100% ：取得 .parent 寬度的 100%;
padding-bottom: 56.25% ：取得 .parent 寬度的 56.25%;
製作出 16:9 等比例縮放的外層 .outer 後，再絕對定位內層 .content ，並將寬高皆設置成 100%，就能得到一個與外層相同大小，但可以任意佈局內部元素的區塊了！

See the Pen aspect-radio by jyun1 (@jyun1desu) on CodePen.

---

懶得計算的話，也可以用 calc()：

.child {
    width: 100%; 
    padding-bottom: calc(9/16 * 100%);
}

3. 簡單暴力的 aspect-ratio

aspect-ratio 是滿新的 CSS 屬性，支援度可以看這裡。只要使用 aspect-ratio: ratio;， ratio 的表現方式是width/height（有夠簡單！）。
也能設置最大寬度、高度，依然會維持等比例，感覺這點是方法2做不到的。

See the Pen aspect-radio by jyun1 (@jyun1desu) on CodePen.

參考資料

W3C Aspect Ratios