使用 img-fluid 类时图像无法正确显示答案

【问题标题】：Images not displayed properly when using img-fluid class使用 img-fluid 类时图像无法正确显示
【发布时间】：2019-09-04 03:38:43
【问题描述】：

将引导类“img-fluid”添加到我的图像时，它们不会出现，在检查元素时，它将图像设置为 0x0 像素。

html：

<div class="col">
    <div class="row no-gutters">
      <div class="col">
        <img src="assets/images/placeholder.png" class="img-fluid" 
        alt="placeholder">
      </div>
      <div class="col">
        <img src="assets/images/placeholder.png" class="img-fluid" alt="placeholder">
      </div>
      <div class="w-100"></div>
      <div class="col">
        <img src="assets/images/placeholder.png" class="img-fluid" alt="placeholder">
      </div>
      <div class="col">
        <img src="assets/images/placeholder.png" class="img-fluid" alt="placeholder">
      </div>
      </div>
    </div>

图像应该与父级 (div.col) 大小相同，并响应父级。

【问题讨论】：

这是因为.col 有一个flex-basis: 0 - 这基本上等同于width: 0

标签： html css bootstrap-4

【解决方案1】：

这是基于我的评论的答案。

因为您有一个.col 元素作为flex 父元素的子元素，所以flex-basis 设置为0。这基本上等同于width: 0。

要解决这个问题，请将.col 上的flex-basis 设置为auto，它们是.row 元素的子元素。

.row>.col {
  flex-basis: auto;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="col">
  <div class="row no-gutters">
    <div class="col">
      <img src="https://placehold.it/100x100" class="img-fluid" alt="placeholder">
    </div>
    <div class="col">
      <img src="https://placehold.it/100x100" class="img-fluid" alt="placeholder">
    </div>
    <div class="w-100"></div>
    <div class="col">
      <img src="https://placehold.it/100x100" class="img-fluid" alt="placeholder">
    </div>
    <div class="col">
      <img src="https://placehold.it/100x100" class="img-fluid" alt="placeholder">
    </div>
  </div>
</div>

【讨论】：

感谢您的回答，给 col 一个定义的网格大小似乎也解决了这个问题。将 col 更改为 col-6 以修复它。