Сетка равной высоты в Bootstrap с многомерными изображениями с Flexbox - PullRequest
0 голосов
/ 04 июня 2018

У меня есть различные изображения разных размеров, которые должны быть одинаковой высоты в сетке начальной загрузки.

Как мне воспроизвести этот дисплей равного размера в Bootstrap?Я пробовал «сгибать 1» на дочерних элементах без радости и «сгибать: 1 0 0%;»используется в исходном коде и в нескольких других уроках по равной высоте в Интернете без удовольствия.

Я думаю, что решение здесь заключается в создании прямоугольных делителей одинакового размера, но интересует способ получения равных высотных делений с помощью flexbox всех пропорцийтоже.

Ответы [ 2 ]

0 голосов
/ 05 июня 2018

У них в основном есть обертка, в которой все эти строки имеют фиксированную ширину ответа (медиазапросы определяют фиксированную ширину для каждого размера экрана) и display:flex / flex-direction:column, чтобы эти строки складывались друг на другазатем эти строки также сгибаются: с flex-direction:row в отличие от вашего кода у каждой строки есть 3 делителя, у этих 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>
0 голосов
/ 04 июня 2018

Если вы управляете файлами изображений, лучшим вариантом, вероятно, будет ручная обрезка изображений до правильных размеров.

Если вы не контролируете исходные изображения (если вы загружаете изудаленный сервис, такой как instagram (как в демоверсии), тогда вы получите лучшие результаты, установив явную высоту для ваших divs, а затем загрузите изображения в качестве фона с background-size: cover;.

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...