html - Flexbox 元素不适应图像高度/稍大

<分区>

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

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

谢谢!

最佳答案

可以尝试添加那个css:

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

可以解决你的问题

关于html - Flexbox 元素不适应图像高度/稍大，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50882250/

上一篇：css - 回退到本地 bootstrap 4 css 文件

下一篇：html - 设置表格的 td 高度在 Firefox 中不起作用

相关文章：

css - 在不使用 div 宽度的情况下将图像和一些文本对齐在同一行上？

css - 使用 bgstretcher 降低轮播高度

html - 鼠标悬停更改图像位置和大小

android - 从 HTML 引用 Assets 中的图像不起作用

html - 如何在 CSS 中移动元素符号点？

java - PDF 到图像转换时出现 NullPointerException

jquery - 如何在我的页面上使用 JQuery？

javascript - jQuery fadeIn() 方法不起作用……

javascript - ELSE IF using 怎么写？ : in javascript

JavaScript 播放/暂停音频切换