Question

我正在处理一个项目，当页面缩小时，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>

Answer 1

取代固定的身高，使用em / vh / %单位作为身高，具体取决于适合的身高。您还可以使用min-height和max-height的相对高度来定义范围。例如，尝试调整窗口大小，看看容器总是占用可用高度的一半。

.container {
  height: 50vh;
  background: green;
}

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

当页面缩小时，如何使div缩小？

1 个答案: