H5页面背景图片布局,盒子高度如何计算,能做到高度响应式展示?

<div class="wrapper">
  <div class="bg_01"></div>
  <div class="bg_02"></div>
  <div class="bg_03"></div>
</div>

.bg_01 { background: url("../images/bg_01.jpg") no-repeat center / cover; }
.bg_02 { background: url("../images/bg_02.jpg") no-repeat center / cover; }
.bg_02 { background: url("../images/bg_03.jpg") no-repeat center / cover; }
.bg_01 { height: 200px; } .bg_02 { height: 300px; } .bg_03 { height: 360px; }
H5页面背景图片布局,盒子高度如何计算,能做到高度响应式展示, 设计图宽度是375px
阅读 780
2 个回答

为啥一定要用背景图?用图片不行吗?

<div class="wrapper">
  <div class="bg"><img src="../images/bg_01.jpg" /></div>
  <div class="bg"><img src="../images/bg_02.jpg" /></div>
  <div class="bg"><img src="../images/bg_03.jpg" /></div>
</div>

<style>
.wrapper .bg{
  width: 100%;
  height: auto;
}
</style>

找了个这种写法,可以用吗?兼容性怎么样?

.bg_01 {  aspect-ratio: 375 / 200; } .bg_02 {  aspect-ratio: 375 / 300;  } .bg_03 { aspect-ratio: 375 / 360;  }

之前有个查CSS兼容can i use的网站现在倒闭了?

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏