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

方法一：

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