CSS保持元素宽高比，固定元素宽高比

chinahcp2008

已于 2025-08-13 15:58:47 修改

阅读量270

点赞数 3

CC 4.0 BY-SA版权

文章标签： css 前端 css3 html5 html

于 2025-08-13 15:52:55 首次发布

本文链接：https://blog.csdn.net/chinahcp2008/article/details/150347453

方法一：

<div class="hcp-fixed-aspect-ratio-box">
	这里是正文内容
</div>

.hcp-fixed-aspect-ratio-box {
	width: 50%;
	color: #FFFFFF;
	margin: 100px auto;
	background: #FF0000;
	/* 宽高比2:1，兼容性可能不太好 */
	aspect-ratio: 2 / 1;
}

方法二：

<div class="hcp-fixed-aspect-ratio-box">
	<div class="hcp-inner">
		<div class="hcp-content">
			这里是正文内容
		</div>
	</div>
</div>

.hcp-fixed-aspect-ratio-box {
	width: 50%;
	margin: 100px auto;
	background: #FF0000;
}
.hcp-fixed-aspect-ratio-box .hcp-inner {
	height: 0;
	width: 100%;
	/* 
	padding在各个方向中的中的百分比，都是相较于父元素宽度的
	所以这里设置padding-top为50%，就将其高度撑开到了父元素宽度的50%
	它自身高度为0，加上padding-top的高度，总体高度就是其父元素宽度的50%
	 */
	padding-top: 50%;
	/* 然后使用相对定位 */
	position: relative;
}
.hcp-fixed-aspect-ratio-box .hcp-content {
	/* 设置其宽高与父元素相同 */
	width: 100%;
	height: 100%;
	color: #FFFFFF;
	/* 然后使用绝对定位 */
	top: 0;
	left: 0;
	position: absolute;
}