如何创建 - 纵横比
了解如何使用 CSS 保持元素的纵横比。
纵横比
创建灵活的元素，在调整大小时保持其纵横比（4:3、16:9 等）:
什么是纵横比?
一个元素的纵横比描述了它的宽度和高度之间的比例关系。 两种常见的视频宽高比是 4:3（20 世纪的通用视频格式）和 16:9（高清电视和欧洲数字电视通用，YouTube 视频默认）。
如何 - 高度等于宽度
步骤 1) 添加 HTML:
使用容器元素，如 <div>，如果你想在其中添加文本，添加子元素:
实例
<div class="container">
<div class="text">Some 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;
}
亲自试一试 »
其他纵横比:
