? ? aspect-ratio 是 CSS 中用于控制元素寬高比的屬性，通過一行代碼即可實現響應式比例布局，無需復雜計算。它確保元素在不同屏幕尺寸下保持固定比例，提升響應式設計效率。
一、基本語法與取值
selector {aspect-ratio: <width> / <height>;
}
參數說明
<width>/<height>：以斜杠分隔的寬高比，如16/9（寬度:高度=16:9）。單值語法：
aspect-ratio: 1等價于1/1（正方形）。
二、核心特性與使用規則
1.優先級規則
若同時設置
width、height和aspect-ratio，寬高比可能失效（瀏覽器優先使用顯式尺寸）。最佳實踐：僅設置
width或height之一，另一維度由aspect-ratio自動計算。
.box {width: 100%; aspect-ratio: 4/3; /* 高度 = 寬度 × 3/4 */
}
2.響應式適配
默認根據寬度計算高度（若設置
height: 100%則根據高度計算寬度）2。結合
max-width/max-height限制極值：
.responsive-video {width: 100%;aspect-ratio: 16/9;max-height: 500px; /* 高度上限 */
}
3.與 object-fit 配合
媒體元素（如圖片、視頻）需搭配 object-fit 避免變形：
img {width: 100%;aspect-ratio: 3/2;object-fit: cover; /* 裁剪多余部分 */
}
三、常見應用場景與示例
1. 保持圖片/視頻寬高比
<div class="video-container"><iframe src="video.mp4"></iframe>
</div>
.video-container {width: 80%;aspect-ratio: 16/9; /* 經典視頻比例 */
}
2. 創建自適應正方形
.square {background: teal;aspect-ratio: 1; /* 簡寫，等價于1/1 */
}
3. 響應式卡片布局
.card {width: calc(33% - 20px);aspect-ratio: 4/3; /* 統一卡片比例 */
}
@media (max-width: 768px) {.card {width: 100%; /* 小屏單列 */aspect-ratio: 3/4; /* 豎屏比例 */}
}
4. 動態高度元素
.hero-banner {height: 60vh; /* 基于視口高度 */aspect-ratio: 2/1; /* 寬度 = 高度 × 2 */
}
四、注意事項
兼容性：現代瀏覽器（Chrome、Firefox、Safari、Edge）均支持，IE 不兼容2。
沖突屬性：避免與
padding百分比布局混淆（padding百分比基于父容器寬度）。替換元素：對
<img>、<video>等元素直接生效，無需額外容器。
五、完整代碼示例
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.gallery {display: grid;grid-template-columns: repeat(3, 1fr);gap: 16px;}.gallery-item {background: #f0f0f0;aspect-ratio: 3/2;/* 統一比例 */object-fit: cover;/* 圖片裁剪適配 */}@media (max-width: 600px) {.gallery {grid-template-columns: 1fr;}.gallery-item {aspect-ratio: 1/1;/* 移動端改為正方形 */}}</style>
</head><body>
<div class="gallery"><img class="gallery-item" src="image1.jpg"><img class="gallery-item" src="image2.jpg"><div class="gallery-item">自定義內容（保持比例）</div>
</div>
</body></html>效果展示：
![[系統架構設計師]系統架構基礎知識（一）](http://pic.xiahunao.cn/[系統架構設計師]系統架構基礎知識（一）)
)
