Css 如何使div随着页面收缩而收缩？

我正在做一个项目，其中div会随着页面的缩小而动态缩小。不幸的是，div的高度保持不变：

CSS

.container {
  min-height: 180px;
  max-height: 350px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  height: 350px;
} 

HTML

<div class="container"></div>

---

根据合适的高度，使用em/

vh

/

%

单位代替固定高度。您还可以将相对高度与

最小高度

和

最大高度

一起使用来定义范围。例如，尝试调整窗口的大小，并查看容器始终占据可用高度的一半

.container{
高度：50vh；
背景：绿色；
}

---

代替固定高度，根据合适的高度使用em/

vh

/

%

单位表示高度。您还可以将相对高度与

最小高度

和

最大高度

一起使用来定义范围。例如，尝试调整窗口的大小，并查看容器始终占据可用高度的一半

.container{
高度：50vh；
背景：绿色；
}