設計稿中的組件常常精致、規整，但一旦進入開發階段，尤其是響應式場景中，部分 UI 就容易失控。例如：一個包含圖片、視頻或需保持固定比例的卡片網格組件。表面看似簡單，實則暗藏大量布局陷阱。

為了解決這些問題，許多項目中采用了監聽 resize 事件、手動計算寬高比、動態注入 style 屬性等方式。雖然功能實現了，但代碼臃腫、可維護性差、兼容性問題頻出。

直到一個 CSS 屬性出現：aspect-ratio。

結果令人驚訝：幾十行 JavaScript 瞬間可以被一行樣式取代。

圖片

傳統方案：JavaScript + 樣式拼接

以下是許多項目中為實現等比例容器所采用的典型做法：

圖片

這種方式雖然“可用”，但存在多個問題：

• 維護成本高
• 需要額外的監聽和邏輯處理
• 高性能設備上體驗尚可，低性能設備下易卡頓
• 瀏覽器窗口縮放時容易出現抖動（layout jank）

一行代碼的解決方案

在現代瀏覽器中，aspect-ratio 提供了原生支持，只需一行 CSS：

.card {
  aspect-ratio: 16 / 9;
}

瀏覽器將自動根據父元素寬度計算出對應高度，從而保持設定比例，無需開發者干預。

響應式卡片：從臃腫到優雅

以常見的卡片組件為例，傳統寫法通常如下：

.card {
position: relative;
padding-top: 56.25%; /* for 16:9 */
}
.card > .content {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}

這套方案依賴于“填充百分比”技巧實現高寬比。雖然通用，但冗長、語義不清。

使用 aspect-ratio 后：

.card {
  aspect-ratio: 16 / 9;
}

效果相同，邏輯更清晰，維護成本也更低。

嵌入視頻或構建方形網格一樣輕松

在視頻嵌入中，aspect-ratio 同樣能簡化布局：

<iframe src="..." style="width: 100%; aspect-ratio: 16 / 9;"></iframe>

無需嵌套容器，也無需額外 JS 控制。比例始終精準，兼容性良好。

同理，如果需要一個等寬等高的網格容器：

.grid-item {
  aspect-ratio: 1;
}

快速生成自動適配的正方形卡片，視覺一致性更強。

瀏覽器兼容性：基本無憂

對于現代項目，aspect-ratio 已可放心使用。除非仍需兼容 IE，否則無需回退方案。

動態內容如何處理？

一個常見疑問是：當容器內部的內容尺寸發生變化時，是否會影響布局？

答案是：不會。

aspect-ratio 控制的是容器本身的比例，與內部內容加載狀態、異步圖片或 iframe 無關。無論內容何時加載，容器尺寸始終穩定，無布局抖動（CLS）問題。

總結：刪除 JS，信任 CSS

如果在處理等比例布局時仍依賴 JS 計算，那么可能錯過了 CSS 的現代能力。

使用 aspect-ratio：

• ? 實現清晰、簡潔的布局邏輯
• ? 刪除冗余監聽器和計算代碼
• ? 保證響應式體驗一致
• ? 提高可讀性與可維護性

這一屬性不僅適用于卡片、視頻、圖片、網格，甚至可以擴展到彈窗、媒體內容、占位圖等多種組件。

在構建現代布局系統時，應優先考慮使用 aspect-ratio，讓瀏覽器做回真正的“布局引擎”。