在重叠的列中引导图像

Question

我一直在尝试使用引导栏使3张图像响应。它们似乎反应灵敏，但是问题在于图像重叠，除了最后一列保持正常之外。

<div class="row">
      <div class="col-sm-2 offset-sm-3">
            <img class="img-responsive" src="../assets/images/roy-creates-categories-02.png">
        </div>
        <div class="col-sm-2">
            <img class="img-responsive" src="../assets/images/roy-creates-categories-02.png">
        </div>
        <div class="col-sm-2">
          <img class="img-responsive" src="../assets/images/roy-creates-categories-02.png">
        </div>
  </div>

我希望所有3列都完全喜欢右边的一列。

我尝试添加“ img-respond”和“ img-fluid”类，但都没有用。

我正在使用bootstrap 4.0。

Answer 1

图像溢出其容器。右侧的图像为全高，但容器溢出了。使用引导程序“ .col-2”意味着您要根据窗口宽度来限制列宽。您可以使用background css规则而不是img元素来确保图像的包含或覆盖，或者只要您具有适当大小的图像，就可以将.col-auto代替.col-2和.justify-content-center

这三个示例都在摘要中。

.row {
 min-height: 150px;
 }

.col-auto {
  background-color: green;
}

.col-sm-2 {
  background-color: red;
}

.bg-image {
  width: 100%;
  height: 100%;
  background-image: url("https://picsum.photos/100");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

.bg-image.bg-image--cover {
  background-size: cover;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="row justify-content-center">
  <div class="col-auto">
    <img class="img-fluid" src="https://picsum.photos/100">
  </div>
  <div class="col-auto">
    <img class="img-fluid" src="https://picsum.photos/100">
  </div>
  <div class="col-auto">
    <img class="img-fluid" src="https://picsum.photos/100">
  </div>
</div>

<div class="row">
  <div class="col-sm-2 offset-sm-3">
    <div class="bg-image"></div>
  </div>
  <div class="col-sm-2">
    <div class="bg-image"></div>
  </div>
  <div class="col-sm-2">
    <div class="bg-image"></div>
  </div>
</div>

<div class="row">
  <div class="col-sm-2 offset-sm-3">
    <div class="bg-image bg-image--cover"></div>
  </div>
  <div class="col-sm-2">
    <div class="bg-image bg-image--cover"></div>
  </div>
  <div class="col-sm-2">
    <div class="bg-image bg-image--cover"></div>
  </div>
</div>