Bootstrap 中的等高网格，带有 Flexbox 的多维图像

Question

我有不同尺寸的各种图像，需要在引导网格中具有相同的高度。

如何在 Bootstrap 中复制这种相同大小的显示？我在没有喜悦的子项目上尝试了“flex 1”和“flex: 1 0 0%;”在源代码和网络上其他一些同等高度的教程中使用，没有任何乐趣。

我认为这里的解决方案是制作大小相等的矩形 div，但也对使用所有比例的 flexbox 获得相等高度的 div 的方式感兴趣。

Answer 1

如果您控制图像文件，最好的选择可能是将图像手动裁剪成正确的尺寸。

如果您不控制源图像（如果您从演示中的 instagram 等远程服务加载），那么您将通过在 div 上设置显式高度然后加载来获得最佳结果图片以background-size: cover;作为背景。

https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

Answer 2

他们基本上有一个包装器，其中所有这些行都具有固定的响应宽度（媒体查询，它们为每个屏幕尺寸定义了一个固定宽度）和display:flex/flex-direction:column 这些行堆叠在一起，然后这些行也被弯曲，flex-direction:row 与您的代码不同，每行有 3 个 div，这些 div 有 flex:1 0 0%，所以它们均匀地分割宽度，并且它们每个都有一个 img，每个 img 都有一组定义的大小srcset 具有相同高度的属性。

所以你看到包装器上的固定宽度在子级之间划分，高度由图像定义。

以下示例

我将您的示例分成两行，每行包含 3 张图片，而不是使用 srceset 属性做同样的事情来使图片具有响应性，为此我只是给它们一个固定的高度解释。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  display: flex;
  flex-direction: column;
  max-width: 935px !important;
  /* Because in here bootsrtap comes after the editor css*/
}

.container>.row {
  display: flex;
  flex-direction: row;
}

.container>.row>div {
  flex: 1 0 0%;
}

.container>.row>div img {
  max-width: 100%;
  height: 293px;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">

<div class="container">

  <h1 class="my-4 text-center text-lg-left"></h1>

  <div id="" class="row text-center text-lg-left">

    <div class="col-lg-4 col-sm-6">
      <a href="" class="d-block mb-4 h-100" target="_blank">
        <img class="img-fluid img-thumbnail" src="https://www.instagram.com/p/BjiCy5uDPHp/media/?size=l" alt="">
      </a>
    </div>

    <div class="col-lg-4 col-sm-6">
      <a href="" class="d-block mb-4 h-100" target="_blank">
        <img class="img-fluid img-thumbnail" src="https://www.instagram.com/p/Bjhw_0DDAKB/media/?size=l" alt="">
      </a>
    </div>

    <div class="col-lg-4 col-sm-6">
      <a href="" class="d-block mb-4 h-100" target="_blank">
        <img class="img-fluid img-thumbnail" src="https://www.instagram.com/p/BjhXUb5DVo4/media/?size=l" alt="">
      </a>
    </div>
  </div>
  <div id="" class="row text-center text-lg-left">
    <div class="col-lg-4 col-sm-6">
      <a href="" class="d-block mb-4 h-100" target="_blank">
        <img class="img-fluid img-thumbnail" src="https://www.instagram.com/p/BjhF2fDjc6E/media/?size=l" alt="">
      </a>
    </div>

    <div class="col-lg-4 col-sm-6">
      <a href="" class="d-block mb-4 h-100" target="_blank">
        <img class="img-fluid img-thumbnail" src="https://www.instagram.com/p/Bjgz6KJDw2S/media/?size=l" alt="">
      </a>
    </div>

    <div class="col-lg-4 col-sm-6">
      <a href="" class="d-block mb-4 h-100" target="_blank">
        <img class="img-fluid img-thumbnail" src="https://www.instagram.com/p/Bjggi3mjTxf/media/?size=l" alt="">
      </a>
    </div>

  </div>

</div>