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>

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

2 个答案: