Объедините Bootstrap столбцы и FlexBox

Question

У меня тут несколько смешанных понятий. Я пытаюсь добиться того, чтобы в наборе bootstrap контейнеров скомбинировать flexbox со столбцами bootstrap и сделать размеры последних изображений («img-team») в соответствии с его контейнерами. Они изменяют размеры по ширине, но не по высоте. Когда высота превышает контейнер, становится больше. В HTML происходит то, что один большой контейнер устанавливает свойство высоты. Затем в подразделах пространство делится в соответствии с flex-grow: 1 или не flex: 0.

РИСУНОК PRETENDED Я хочу, чтобы изображение адаптировало этот div, не менять высоту большого оранжевого контейнера. В настоящее время он работает, но не с увеличением высоты, только для увеличения ширины.

HTML

.img-team {
  overflow: hidden;
  height: 100%;
  width: 100%;
}

<div class="container-fluid" style="display:flex; flex-flow: column; flex: 0 0 50vh">
  <div class="container-fluid" style="display:flex; flex-flow: column; flex-grow: 1">
    <div>
      <h4 class="">TITLE</h4>
    </div>
    <div class="row" style="display:flex; flex-grow: 1">
      <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12" style="display:flex; flex-grow: 1; flex-flow: column">
        <div style="display:flex; flex-grow: 1; flex-shrink: 1; flex-basis: 0">
          <img class="img-team" src="img/team-1.jpg" href=""></img>
        </div>
        <div>
          <h4 class="xxx">Walter White</h4>
          <h4 class="xxx">More text</h4>
        </div>
      </div>
      <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12" style="display:flex; flex-grow: 1; flex-flow: column">
        <div style="display:flex; flex-grow: 1">
          <img class="img-team" src="" href=""></img>
        </div>
        <div>
          <h4 class="xxx">Walter White</h4>
          <h4 class="xxx">More text</h4>
        </div>
      </div>
      <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12" style="display:flex; flex-grow: 1; flex-flow: column">
        <div style="display:flex; flex-grow: 1">
          <img class="img-team" src="" href=""></img>
        </div>
        <div>
          <h4 class="xxx">Walter White</h4>
          <h4 class="xxx">More text</h4>
        </div>
      </div>
      <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12" style="display:flex; flex-grow: 1; flex-flow: column">
        <div style="display:flex; flex-grow: 1">
          <img class="img-team" src="" href=""></img>
        </div>
        <div>
          <h4 class="xxx">Walter White</h4>
          <h4 class="xxx">More text</h4>
        </div>
      </div>
    </div>
  </div>
</div>

1. Без изображения. Все подходит и идет хорошо.

2. С изображением. Содержимое больше не подходит (подходит только ширина, а не высота). Вот почему я считаю его причиной изображения.

Answer 1

Я не совсем уверен, чего вы пытаетесь достичь, но это может помочь:

1. Проверьте стили для div .img-team-wrap, это div-обертка для изображений с padding-top, в этом случае это 100% для поддержания соотношения сторон DIV 1: 1, вы можете найти больше об этом здесь
2. , чем использовать стили из .img-team для изображений, чтобы центрировать его внутри div.
3. Также добавьте flex: 1 и justify-content: flex-end;. Я думаю, что для каждой колонки это решает проблему.

html,
body {
  margin: 0;
  padding: 0;
}

.page {
  display: flex;
}

.top-content,
.team-wrap {
  height: 50vh;
}

.team-wrap>div {
  flex: 1;
  justify-content: flex-end;
}

.img-team-wrap {
  padding-top: 100%; /* 1:1 Aspect Ratio */
  position: relative; /* For Positioning Image Inside */
  overflow: hidden;
}

.img-team {
  overflow: hidden;
  height: 101%;
  width: 101%;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -o-object-fit: cover;
  object-fit: cover;
}

<div class="page">
  <div class="container-fluid" style="display:flex; flex-flow: column; flex: 0 0 100%">
    <div class="container-fluid" style="display:flex; flex-flow: column; flex-grow: 1">
      <div class="top-content">
        <h4 class="">TITLE</h4>
      </div>
      <div class="row team-wrap" style="display:flex; flex-grow: 1">
        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12" style="display:flex; flex-grow: 1; flex-flow: column">
          <div class="img-team-wrap" style="display:flex; flex-grow: 1;">
            <img class="img-team" src="https://sparkwebservices.com/img/ww-1.jpg" />
          </div>
          <div>
            <h4 class="xxx">Walter White</h4>
            <h4 class="xxx">More text</h4>
          </div>
        </div>
        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12" style="display:flex; flex-grow: 1; flex-flow: column">
          <div class="img-team-wrap" style="display:flex; flex-grow: 1">
            <img class="img-team" src="https://sparkwebservices.com/img/ww-2.jpg" />
          </div>
          <div>
            <h4 class="xxx">Walter White</h4>
            <h4 class="xxx">More text</h4>
          </div>
        </div>
        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12" style="display:flex; flex-grow: 1; flex-flow: column">
          <div class="img-team-wrap" style="display:flex; flex-grow: 1">
            <img class="img-team" src="https://sparkwebservices.com/img/ww-3.jpg" />
          </div>
          <div>
            <h4 class="xxx">Walter White</h4>
            <h4 class="xxx">More text</h4>
          </div>
        </div>
        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12" style="display:flex; flex-grow: 1; flex-flow: column">
          <div class="img-team-wrap" style="display:flex; flex-grow: 1">
            <img class="img-team" src="https://sparkwebservices.com/img/ww-1.jpg" />
          </div>
          <div>
            <h4 class="xxx">Walter White</h4>
            <h4 class="xxx">More text</h4>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>