利用padding-bottom技巧或aspect-ratio属性，结合Flexbox与Grid布局，可实现响应式设计中元素的固定宽高比，如16:9视频容器；通过设置position:relative与padding-bottom百分比（如56.25%），再用绝对定位填充内容，兼容旧浏览器；现代方案使用aspect-ratio:16/9，代码更简洁，但需注意Safari等旧版本兼容性问题。
在响应式设计中，保持元素的宽高比例（如16:9、4:3等）是一个常见需求，比如视频容器、图片展示或卡片布局。使用 Flexbox 或 Grid 结合百分比技巧，可以轻松实现这一效果。
利用“padding-bottom”技巧保持比例
核心方法是利用 padding-bottom 的百分比值基于父元素宽度计算的特性，来创建一个固定宽高比的容器。
例如，要实现 16:9 的比例：
- 将容器设为相对定位：position: relative;
- 设置 padding-bottom: 56.25%;（因为 9 ÷ 16 = 0.5625）
- 内部子元素使用绝对定位填满容器
.aspect-ratio-box {
position: relative;
width: 100%;
padding-bottom: 56.25%; /* 16:9 */
}
.aspect-ratio-content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Flexbox 中结合比例容器
在 Flex 布局中，可将上述比例容器作为子项，flex 容器仍控制排列和空间分配。
立即学习“前端免费学习笔记（深入）”；
- 父容器使用 display: flex;
- 每个子项使用固定比例的容器结构
- 子项可等宽分布，同时各自保持内部宽高比
这样既实现了弹性布局，又保留了媒体内容的显示比例。
Grid 中实现多比例响应式网格
CSS Grid 可直接定义网格轨道，并嵌入比例容器。
- 使用 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 实现响应式列数
- 每格内放入带 padding-bottom 比例的容器
- 图片或内容绝对定位填充
这种方式适合画廊、卡片列表等场景，自动适配不同屏幕尺寸。
现代替代方案：aspect-ratio 属性
现代浏览器支持 aspect-ratio 属性，更直接：
.responsive-item {
width: 100%;
aspect-ratio: 16 / 9;
background: #eee;
}
结合 Flexbox 或 Grid 使用时，无需额外的 padding 技巧，代码更简洁。但需注意旧浏览器兼容性（如 Safari 早期版本）。
基本上就这些。通过 padding-bottom 技巧或现代 aspect-ratio，配合 Flexbox 与 Grid 的布局能力，能灵活实现响应式宽高比控制。兼容性要求高时用传统方法，追求简洁可用新属性。
