Html 网格单元容器中的图像不是正方形

正如标题所说。当我在网格容器的单元格容器中有一个图像时，图像不是正方形的。如果我的图像是网格单元的直线，它们就是

代码：

HTML:

网格画廊

CSS:

正文{
背景色：黑色；
利润率：3vw 2vw；
}
.集装箱{
显示：网格；
填充：2px；
间隙：2px；
背景色：白色；
网格模板列：重复（4，1fr）；
网格模板行：重复（2，1fr）；
}
.项目{
边框：1px纯黑；
}
.项目img，
img{
宽度：100%；
}
.项目：悬停，
img：悬停{
不透明度：0.6；
光标：指针；
}

代码：

图像本身得到平方：

但是包含图像的

div.item

没有。它的高度更高，因此在底部留下一些空白：

---

为什么会发生这种情况？如果我不使用container类，直接放置图像，效果会很好。

为

中的图像添加
display:block
属性。item

解决了这个问题。这个问题与img标记作为内联块的性质有关。

请添加

display:flex到项目类

 .item {display:flex;}


正文{
背景色：黑色；
利润率：3vw 2vw；
}
.集装箱{
显示：网格；
填充：2px；
间隙：2px；
背景色：白色；
网格模板列：重复（4，1fr）；
网格模板行：重复（2，1fr）；
}
.项目{
边框：1px纯黑；
显示器：flex；
}
.项目img，
img{
宽度：100%；
}
.项目：悬停，
img：悬停{
不透明度：0.6；
光标：指针；
}

网格画廊
我不知道原因，但是如果您像这样修改您的item类

 .item {
    display: contents;
    border: 1px solid black;
}

然后你的图像将是方形的。
您可以使用margin进行如下调整：
.item{margin:-4px；}
或将img设置为display:block；这回答了你的问题吗？这是对的。谢谢这是一种令人困惑的行为。