css - 如何使 flexbox 随着页面变小而收缩

Question

我想让我的容器 flexbox 随着页面变小而收缩

HTML

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

CSS

.background-image-container {
  display: flex;
  width: 100%;
  height: 350px;
}

.background-image {
  display: flex;
  width: 100%;
  min-height: 180px;
  max-height: 350px;
  height: inherit;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}

编辑

更改了 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>