css - 使 div 大小响应设置高度

Question

我有一个背景图片包裹在一个 div 中，里面是一个响应式背景图片，因此它会根据屏幕大小进行缩放。但是我无法弄清楚如何在将最大高度限制设置为 350px 的同时使 div 包装器响应。这是我拥有的:

<div class="container">
 <div class="row">
  <div class="col-12 divWrapper">
   <div class="backgroundImage" style="backgroundImgUrl">
   </div>
  </div>
 </div>
</div>

.divWrapper {
   max-height: 350px;
   height: 350px;
 } 


.backgroundImage {
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: center center;
  height: inherit;
}

每次我缩小屏幕时，图像都会调整大小并且 div 包装器保持不变，反之亦然

Answer 1

你试过用background-size:cover设置你的Div吗？