时间戳

首页 > 解决方案 > Flexbox 项目不适应图像高度/稍大

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;
}

结果：

例子

图像应该在边缘接触，但有一个间隙。我已经尝试将边距和填充设置为 0，但没有成功。

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

谢谢！

标签： htmlimagecssflexbox

解决方案

可以尝试添加该css：

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

可以解决你的问题

推荐阅读