如何 - 宽高比
学习如何使用 CSS 保持元素的宽高比。
宽高比
创建灵活的元素，在调整大小时能保持其宽高比（4:3、16:9 等）
什么是宽高比？
元素的宽高比描述了其宽度和高度之间的比例关系。两个常见的视频宽高比是 4:3（20 世纪的通用视频格式）和 16:9（高清电视和欧洲数字电视的通用格式，也是 YouTube 视频的默认格式）。
如何 - 高等于宽
步骤 1) 添加 HTML
使用容器元素，例如 <div>，如果要在其中包含文本，请添加一个子元素
示例
<div class="container">
<div class="text">一些文本</div> <!-- 如果要在容器中包含文本 -->
</div>
步骤 2) 添加 CSS
为 padding-top 设置百分比值以保持 DIV 的宽高比。以下示例将创建一个 1:1 的宽高比（高度和宽度始终相等）
示例 1:1 宽高比
.container {
background-color: red;
width: 100%;
padding-top: 100%; /* 1:1 宽高比 */
position: relative; /* 如果要在其中包含文本 */
}
/* 如果要在容器中包含文本 */
.text {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
自己动手试一试 »
其他宽高比
aspect-ratio CSS 属性
在较新的浏览器中，您可以直接使用 CSS aspect-ratio 属性
表中的数字指定了完全支持该属性的第一个浏览器版本。
| 属性 | |||||
|---|---|---|---|---|---|
| aspect-ratio | 88 | 88 | 89 | 15 | 74 |
