html - 网格内的图像会不成比例地拉伸(stretch)网格元素的大小

Question

#hi {
      display: grid;
    grid-template-columns: auto auto;
}

#hi > div {
      border: 1px solid red;
    min-height: 300px;
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
  min-height: 300px;
}

img {
  width: 100%;
  height: auto;
}

<div id='hi'>
  <div><img src='http://wvs.topleftpixel.com/photos/scotia_plaza_tall_stitched.jpg'></div>
  <div>erhbv</div>
  <div>erhbv</div>
  <div></div>
</div>

注意 - 图片在嵌入时无法正常工作 - CODEPEN URL WORKS:https://codepen.io/anon/pen/vVeWpL

我是网格的新手并且到目前为止很喜欢它们，但是我对这个问题很困惑。由于某些未知原因，网格被图像拉伸(stretch)，尽管它的宽度为 100%。即使我将宽度更改为 10%，网格仍然被拉伸(stretch)。我也尝试过仅通过添加宽度 100% 来确保父级宽度为 100%，但这也失败了。

谁能帮忙把网格宽度设为 50/50，并解释发生了什么？

Answer 1

Can someone help make the grid width be 50/50, and explain what happened?

解决您的问题/请求的第一部分；将网格分成两个大小相同的列，您可以简单地指定离散维度，例如代替:

grid-template-columns: auto auto;

您可以改用:

grid-template-columns: 1fr 1fr;

#hi {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

#hi>div {
  border: 1px solid red;
  min-height: 300px;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  min-height: 300px;
}

img {
  width: 100%;
  height: auto;
}

<div id='hi'>
  <div><img src='http://wvs.topleftpixel.com/photos/scotia_plaza_tall_stitched.jpg'></div>
  <div>erhbv</div>
  <div>erhbv</div>
  <div></div>
</div>

JS Fiddle demo .

或者使用 repeat()函数做同样的事情:

grid-template-columns: repeat(2, 1fr);

#hi {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

#hi>div {
  border: 1px solid red;
  min-height: 300px;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  min-height: 300px;
}

img {
  width: 100%;
  height: auto;
}

<div id='hi'>
  <div><img src='http://wvs.topleftpixel.com/photos/scotia_plaza_tall_stitched.jpg'></div>
  <div>erhbv</div>
  <div>erhbv</div>
  <div></div>
</div>

JS Fiddle demo .

虽然我使用了 fr上述示例中的单位当然可以使用其他尺寸(例如 50% 50%/repeat(2, 50%) 等)； 1fr简单地分配可用空间的小数单位，由前面的数字确定。

关于你问题的后半部分，我只能提供对发生的事情的观察——但没有引用规范——但我相信 auto 的使用关键字允许 grid-item 的内容(<div> 包含 <img> )来指定该元素的大小。不过，我不知道为什么会产生最终结果(但我怀疑其他人会提供更好的解释)。

引用:

• > repeat() function .