如何保持宽高比
学习如何使用 CSS 保持元素的宽高比。
宽高比
创建可灵活调整大小的元素,同时保持其宽高比(4:3、16:9等):

什么是宽高比?
元素的宽高比描述的是其宽度和高度之间的比例关系。两种常见的视频宽高比是 4:3(20 世纪的通用视频格式)和 16:9(高清电视和欧洲数字电视以及 YouTube 视频的通用格式)。
如何实现 - 高度等于宽度
第一步 - 添加 HTML:
使用容器元素,例如 <div>
,如果您想要其中包含文本,请添加一个子元素:
<div class="container"> <div class="text">Some text</div> <!-- 如果您希望容器内有文本 --> </div>
第二步 - 添加 CSS:
为 padding-top
添加百分比值,以保持 DIV 的宽高比。下例将创建一个宽高比为 1:1 的 DIV(高度和宽度始终相等):
实例 - 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; }
其他宽高比
实例 - 16:9 宽高比
.container { padding-top: 56.25%; /* 16:9 宽高比(9 除以 16 等于 0.5625) */ }
实例 - 4:3 宽高比
.container { padding-top: 75%; /* 4:3 宽高比(3 除以 4 等于 0.75) */ }
实例 - 3:2 宽高比
.container { padding-top: 66.66%; /* 3:2 宽高比(2 除以 3 等于 0.6666) */ }
实例 - 8:5 宽高比
.container { padding-top: 62.5%; /* 8:5 宽高比(5 除以 8 等于 0.625) */ }
CSS aspect-ratio 属性
在较新的浏览器中,您可以简单地使用 CSS aspect-ratio
属性:
实例 - 3:2 宽高比
.container { aspect-ratio: 3 / 2; }
表中的数字注明了完全支持该属性的首个浏览器版本。
Chrome | Edge | Firefox | Safari | Opera |
---|---|---|---|---|
Chrome | Edge | Firefox | Safari | Opera |
88 | 88 | 89 | 15 | 74 |