固定比例 - 最大“尺寸”

Question

新手需要帮助。

如何保留一个 div，以固定的纵横比填充动态大小的容器的高度。

我将第一个全页网格设置为 1 2 6 和 2 fr 行，1 列。

我现在在第一个 1fr 行中创建 5 个框。我首先将其设置为重复网格（5, 1fr）。我现在已将 5 个框设置为宽高比：1。但一旦他们填满了 1fr 行的高度，我就无法阻止他们拉伸它。

我希望他们最大化行的高度，但然后停下来并增加行间距。

提到的空格是否回答了我的问题？改为 Flexbox？

Answer 1

对于这些情况，答案通常是 Flexbox。

尝试在 CSS 上使用 max-height 属性，这样你仍然可以让元素垂直增长，但直到达到限制，如下所示：

.main-container {
  background-color: pink;
  border: 1px solid red;
  height: 300px;
  width: 300px;
  margin: 30px auto;
  
  display: flex;
  justify-content: center;
  align-items: center;
}

.controled-div{
  background-color: grey;
  border: 1px solid black;
  
  height: 100%;
  width: 100%;
  
  max-height: 150px;
  max-width: 150px;
}

<div class="main-container">
  <div class="controled-div">

  <div>
<div>

因此，如果您的页面是响应式的并且容器大小发生变化，它就会响应。您也可以使用

min-height

和

min-width

属性

设置最小尺寸