如何 - 纵横比
了解如何使用 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 |
