防止网格在 flexbox 内溢出

Question

我不确定为什么图片会占用这么多空间并导致溢出。如果将 imgs 替换为文本，它看起来很好。

for (let i = 0; i < 15; i++)
{
  $("#grid").append(`
    <div class="item">
      <img src="http://via.placeholder.com/150x350" />
    </div>
  `);  
}

.flex {
  border: 1px solid black;
  display: flex;
  flex-direction: column;
  height: 100vh;
}
.footer {
  height: 20%;
}
.upper {
  flex: 1;
  overflow: auto;
}

#grid {
  border: 1px solid black;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  height: 100%;
  position: relative;
  max-width: 100%;

}

.item {
  display: inline-block;
  text-align: center;
}

img {
  max-height: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<div class="flex">
  <div class='upper'>
    <div id="grid">
    </div>  
  </div>
  <div class="footer">
    footer
  </div>
</div>

Answer 1

这里的问题是：

• #grid 上的height: 100% 与border: 1px 结合使用，但不使用box-sizing: border-box

• item 和 image 上的经典内联空白

修复：

• 在#grid 上添加box-sizing: border-box（或使用计算，height: calc(100% - 2px)）

• 在item 上删除inline-block 并在img 上添加display: block

为了图像的居中，作为一个块，我还添加了margin: 0 auto并删除了text-align: center，因为它已经没有效果了。

堆栈sn-p

for (let i = 0; i < 15; i++)
{
  $("#grid").append(`
    <div class="item">
      <img src="http://via.placeholder.com/150x350" />
    </div>
  `);  
}

.flex {
  border: 1px solid black;
  display: flex;
  flex-direction: column;
  height: 100vh;
}
.footer {
  height: 20%;
}
.upper {
  flex: 1;
  overflow: auto;
}

#grid {
  border: 1px solid black;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  height: 100%;
  position: relative;
  max-width: 100%;
  box-sizing: border-box;                  /*  added  */
}

.item {
  /*display: inline-block;                     removed  */
  /*text-align: center;                        removed  */

  min-height: 0;                           /*  Firefox fix  */
}

img {
  display: block;                          /*  added  */
  margin: 0 auto;                          /*  added  */
  max-height: 100%;
  max-width: 100%;           /*  might want this too  */
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<div class="flex">
  <div class='upper'>
    <div id="grid">
    </div>  
  </div>
  <div class="footer">
    footer
  </div>
</div>

Answer 2

这是缩小包含具有固有尺寸（例如图像）元素的网格项目的一种方法 - 同时保持纵横比

img { object-fit: contain; }

for (let i = 0; i < 15; i++)
{
  $("#grid").append(`
    <div class="item">
      <img src="http://via.placeholder.com/150x350" />
    </div>
  `);  
}

.flex {
  border: 1px solid black;
  display: flex;
  flex-direction: column;
}
.footer {
  height: 20%;
}
.upper {
  flex: 1;
  overflow: auto;
}

#grid {
  border: 1px solid black;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  height: 100%;
  position: relative;
  max-width: 100%;
}

.item {
  display: inline-block;
  text-align: center;
}

img {
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<div class="flex">
  <div class='upper'>
    <div id="grid">
    </div>  
  </div>
  <div class="footer">
    footer
  </div>
</div>

Answer 3

您可以使用图片作为背景，这样更容易控制和避免溢出。另外不要忘记高度计算中的边框，因此您可以添加box-sizing:border-box：

for (let i = 0; i < 15; i++) {
  $("#grid").append(`
    <div class="item" style="background-image:url(http://via.placeholder.com/150x350)">
     
    </div>
  `);
}

.flex {
  border: 1px solid black;
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.footer {
  height: 20%;
}

.upper {
  flex: 1;
  overflow: auto;
}

#grid {
  border: 1px solid black;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  height: 100%;
  position: relative;
  max-width: 100%;
  box-sizing:border-box;
}

.item {
  display: inline-block;
  text-align: center;
  background-size: auto 100%;
  background-position:center;
  background-repeat:no-repeat;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<div class="flex">
  <div class='upper'>
    <div id="grid">
    </div>
  </div>
  <div class="footer">
    footer
  </div>
</div>