CSS aspect-ratio property

導言 - Lead paragraph

隨著網頁設計的發展，我們經常需要在不同設備和屏幕尺寸上呈現內容。

但由於不同屏幕的寬高比可能不同，保持圖像、影片和其他元素的外觀一致變得更加具有挑戰性。

而這正是 CSS 的 aspect-ratio 屬性所關注的核心問題。

Aspect-ratio

aspect-ratio 屬性的作用非常簡單，它可以輕鬆地保持元素一致的寬高比，從而消除了對眾所周知的 padding-top hack 的需要。

而這一特性對於設計響應式佈局和適應不同螢幕尺寸的情境非常有用。

常用的比例寬高可以參考：

Photo by Wikimedia Commons on Wikimedia Commons

對比過往兩種方法 -->

Padding-top

Calc()

.example {
  --ratio: 16/9;
  width: 100%;
  height: calc(var(--width) / (var(--ratio)));
}

Example

結論 - Concluding

ummmm 複習舊內容，不過主要是紀錄筆記。

參考資料 - Reference

[1] Compat 2021: Eliminating five top compatibility pain points on the web

https://web.dev/compat2021/

[2] Compat 2021 Holiday Update: presents for developers before the end of the year

https://web.dev/compat2021-holiday-update/

[3] Compat 2021 Dashboard https://wpt.fyi/interop-2021