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

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

直到一個 CSS 屬性出現(xiàn)：aspect-ratio。

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

圖片

傳統(tǒng)方案：JavaScript + 樣式拼接

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

圖片

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

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

一行代碼的解決方案

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

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

瀏覽器將自動根據(jù)父元素寬度計算出對應(yīng)高度，從而保持設(shè)定比例，無需開發(fā)者干預(yù)。

響應(yīng)式卡片：從臃腫到優(yōu)雅

以常見的卡片組件為例，傳統(tǒng)寫法通常如下：

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

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

使用 aspect-ratio 后：

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

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

嵌入視頻或構(gòu)建方形網(wǎng)格一樣輕松

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

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

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

同理，如果需要一個等寬等高的網(wǎng)格容器：

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

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

瀏覽器兼容性：基本無憂

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

動態(tài)內(nèi)容如何處理？

一個常見疑問是：當(dāng)容器內(nèi)部的內(nèi)容尺寸發(fā)生變化時，是否會影響布局？

答案是：不會。

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

總結(jié)：刪除 JS，信任 CSS

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

使用 aspect-ratio：

• ? 實現(xiàn)清晰、簡潔的布局邏輯
• ? 刪除冗余監(jiān)聽器和計算代碼
• ? 保證響應(yīng)式體驗一致
• ? 提高可讀性與可維護(hù)性

這一屬性不僅適用于卡片、視頻、圖片、網(wǎng)格，甚至可以擴(kuò)展到彈窗、媒體內(nèi)容、占位圖等多種組件。

在構(gòu)建現(xiàn)代布局系統(tǒng)時，應(yīng)優(yōu)先考慮使用 aspect-ratio，讓瀏覽器做回真正的“布局引擎”。