## aspect-ratio 比例

### 語法

element {
  aspect-ratio: width / height;
}

### 說明
- 用來設定元素的長寬比，確保在縮放或自適應時，能保持固定比例。
- width 與 height 為數字（不需單位），代表比例。
- 設定值可以是整數或小數，例如 16／9、1／1、3／2。
- 若只設定 width 或 height，瀏覽器會按照比例，計算出另一邊的值。
- 若 width 與 height 都有設置，`aspect-ratio` 則會作為「預設比例」，直到被覆蓋。
- `aspect-ratio` 屬性主要適用區塊元素（要能設置寬、高），不適用於行內元素。
- 應用在圖片時，經常與 `object-fit: cover;` 搭配使用，避免圖片因壓縮變形（但會裁切超出容器的部分）。

### 範例
<iframe height="300" style="width: 100%;" scrolling="no" title="CSS 屬性｜" src="https://codepen.io/eku10rei/embed/bNVLVgd?default-tab=css%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/eku10rei/pen/bNVLVgd">
CSS 屬性｜</a> by Edie (<a href="https://codepen.io/eku10rei">@eku10rei</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>

## 資料來源
- [CSS aspect-ratio 屬性](https://web.dev/articles/aspect-ratio?hl=zh-tw#example_preventing_layout_shift)