如何使某些图像适合 bootstrap 列，并使用自动缩放图像填充列

Question

这是我的代码：

<div class="row">
    <div class="col-12">
      <div class="row">
        <div class="col-lg-6 col-md-6 col-sm-12">
          <div class="xon-card">
            <img class="img-fluid" src="https://www.adidas.co.id/media/scandiweb/slider/9/6/960x500_3_.jpg" alt="">
          </div>
        </div>
        <div class="col-lg-6 col-md-6 col-sm-12">
          <img class="img-fluid" src="https://www.adidas.co.id/media/scandiweb/slider/m/e/mermaid--teaser-update-5.jpg" alt="">
        </div>
      </div>
    </div>
  </div>

之后我想做一些这样的按钮

我正在使用 bootstrap 5.

Answer 1

我猜你可以flex-wrap处理它。请参阅下面的 link。

https://getbootstrap.com/docs/4.0/utilities/flex/#wrap

Answer 2

为 img 添加样式：

width: 100%;
height: 100%;
object-fit: cover;

如何使某些图像适合 bootstrap 列，并使用自动缩放图像填充列

How to make some image fit with the bootstrap columns with auto zoom image to fill the column

html

css

image

bootstrap-5