css 保持元素宽高比随页面宽度变化高度自适应

作者：System 时间：2024年08月15日分类：所有,css 字数：630

这篇文章距离上次修改已过191天，其中的内容可能已经有所变动。

要保持元素的宽高比，并让其高度随页面宽度变化而自适应，可以使用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的百分比值自适应。

css 保持元素宽高比随页面宽度变化高度自适应

评论已关闭

推荐阅读