css 保持元素宽高比 随页面宽度变化高度自适应
要保持元素的宽高比，并让其高度随页面宽度变化而自适应，可以使用CSS的padding-top属性配合百分比单位来实现。这种方法依赖于父元素的宽度来计算内部元素的高度。
以下是一个示例代码：
HTML:
<div class="container">
<div class="box"></div>
</div>CSS:
.container {
position: relative;
width: 100%; /* 或者你需要的固定宽度 */
}
.box {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%; /* 父容器宽度 */
padding-top: 56.25%; /* 宽高比，这里以9:16为例，计算方式为 padding-top = 宽度 / 高度 * 100% */
background-color: #3498db; /* 示例背景色 */
}在这个例子中，.box的padding-top被设置为56.25%，这是因为9:16的宽高比等于56.25%。当.container的宽度变化时，.box的高度会根据padding-top的百分比值自适应。
评论已关闭