Question

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

<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包装器保持saame，反之亦然

Answer 1

您是否尝试使用背景大小设置Div：封面;

Answer 2

变化：

.backgroundImage {
  background-size: 100% auto;
}

为：

.backgroundImage {
  background-size: cover;
}

演示：https://jsfiddle.net/ujjn5cvt/

使div高度响应设定的高度

2 个答案: