如何在页面变小时缩小弹性框

Question

我希望随着页面变小而使我的容器flexbox缩小

HTML

k%3 != 1

CSS

// this is Vue.js
<div class="background-image-container">
 <div class="background-image" style="{ backgroundImage: 'url(' + bgImageUrl + ')' }">
 </div>
</div>

修改

更改了HTML以便它可读

编辑2

修正了CSS

Answer 1

您可以使用vw和vh来表示宽度和高度。这是它的代码片段：

.background-image-container {
  display: flex;
  width: 80vw;
  min-height: 180px;
  height: 100vh;
  max-height: 350px;
  
}

.background-image {
background-image: url("http://www.xsjjys.com/data/out/211/WHDQ-513480478.jpg");
  display: flex;
  width: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}

<div class="background-image-container">
 <div class="background-image">
 </div>
</div>