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

chinahcp20082025-08-15 1:33

方法一：

html 复制代码

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

css 复制代码

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

方法二：

html 复制代码

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

css 复制代码

.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;
}