Flexbox 项目不适应图像高度/稍大 [重复]答案

【问题标题】：Flexbox item does not adjust to image height/is slightly larger [duplicate]Flexbox 项目不适应图像高度/稍大 [重复]
【发布时间】：2018-11-25 16:38:03
【问题描述】：

我正在尝试将图像放入 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，但没有成功。

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

谢谢！

【问题讨论】：

只需在图片中添加vertical-align: bottom：jsfiddle.net/hz36o7r0/1
这样就行了。但是你能解释一下为什么会有差距吗？
在我的回答中解释了副本。如果您阅读后仍然不清楚，请告诉我。
谢谢，明白了。对不起，重复。没有找到重复的问题。
没问题，很高兴我能帮上忙。

标签： html image css flexbox

【解决方案1】：

可以尝试添加那个css：

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

可以解决你的问题

【讨论】：