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

Question

将引导类“ 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），并且对父图像有响应。

Answer 1

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

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

要解决此问题，请将{{1}的子元素flex-basis上的auto设置为.col。

.row

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