网格中的图像将网格项大小拉伸得与其他图像不成比例

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>

注意 - 图像在嵌入时无法正常工作 - 代码笔 URL 工作：

https://codepen.io/anon/pen/vVeWpL我是网格的新手，到目前为止很喜欢它们，但对这个问题感到非常困惑。由于某种未知原因，网格被图像拉伸，尽管它的宽度为 100%。即使我将宽度更改为 10%，网格仍然被拉伸。我还尝试仅通过添加宽度 100% 来确保父项的宽度为 100%，但这也失败了。

有人可以帮助使网格宽度为 50/50，并解释发生了什么吗？

Answer 1

有人可以帮助使网格宽度为 50/50，并解释发生了什么吗？

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

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小提琴演示。

或者利用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小提琴演示。

虽然我在上面的例子中使用了fr单位，但当然可以使用其他维度(例如50% 50%/repeat(2, 50%)等(;1fr只是分配可用空间的小数单位，由前面的数字确定。

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

参考：

• repeat()功能。