防止网格在flexbox

Question

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

＆＃13;

＆＃13;

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

＆＃13;

.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%;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

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

＆＃13;

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

这里的问题是：

{li>

height: 100% #grid与border: 1px相结合而未使用box-sizing: border-box

• item和image

上的经典内嵌空格

修复：

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

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

为了使图像居中，作为一个块，我还添加了margin: 0 auto并删除了text-align: center，因为它不再有效。

Stack snippet

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 3

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

img { object-fit: contain; }

＆＃13;

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;