Flexbox项目不会调整到图像高度/略大

Question

我正在尝试将图像放在flexbox项目中，并希望外部div调整到图像高度的高度。 但不知何故，外部div比图像稍微高一些，我不知道是什么造成的。

我的HTML：

<div class="flex-container">
    <div class="item">

    </div>
    <div class="item">
      <img class="img-responsive" src="http://via.placeholder.com/1920x1080">
    </div>
    <div class="item">
      <img class="img-responsive" src="http://via.placeholder.com/1920x1080">
    </div>
    <div class="item">

    </div>
</div>

CSS：

.flex-container {
    display: flex;
    flex-wrap: wrap;
}
.item {
    width: 50%;
}
.img-responsive {
    width: 100%;
    height: auto;
}

结果：

Example

图像应该在边缘处触摸，而是有间隙。我已经尝试将边距和填充设置为0而没有成功。

如果有人可以解释造成这种情况的原因，那就太好了。

谢谢！

Answer 1

可以尝试添加css：

.item {
  width: 50%;
  line-height: 0;
}

可以解决您的问题