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

Question

<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

Answer 1

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

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

Answer 2

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

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

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