Question

我试图将2张图像排成一行，但要通过引导使它们保持响应状态。

我尝试使用

<img src="..." class="float-left" alt="...">
<img src="..." class="float-right" alt="...">

并保持他们的响应速度

<img src="..." class="img-fluid" alt="Responsive image">

但是当我尝试混合使用它们时，它就不会像这样工作：

<img src="..." class="img-fluid float-left"
<img src="..." class="img-fluid float-right"

<div class="allatok">
<img class="float-left" src="img/portfolio/labrador.png" alt="" style="height: 400px;">
<div class="papagaj">
<img class="float-right" src="img/portfolio/labrador.png" alt="" style="height: 400px;">
</div>
</div>

问题是，它们根本没有响应。

Answer 1

尝试仅将2张图像放入类d-flex的div中，但是每张图像也需要包裹在div中。

类img-fluid将max-width: 100%赋予图像，因此，除非您将它们包装在另一个div中，否则它们的宽度会超出所需范围。

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="imgwrap d-flex">
  <div>
    <img src="https://picsum.photos/id/1025/400" class="img-fluid" />
  </div>
  <div>
    <img src="https://picsum.photos/id/237/400" class="img-fluid" />
  </div>
</div>

内嵌响应式图像

1 个答案: