html - 结合 Bootstrap 列和 FlexBox

Question

我在这里得到了一些混合的概念。我想要实现的是，在一组引导容器中，将 flexbox 与引导列结合起来，并根据他的容器调整最后一个图像（“img-team”）的大小。他们根据宽度而不是高度调整大小。什么时候超过容器的高度才会变大。HTML 中发生的事情是一个大容器设置了 height 属性。然后在 subdivs 中，空间根据 flex-grow:1 或不 flex:0 进行划分。

DRAW OF 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. 带图像。包含不再适合（仅适合宽度而不是高度）。这就是为什么我认为它的图像的原因。

标签： htmlcssflexbox

Answer 1

我不太确定您要达到的目标，但这可能会有所帮助：

1. 检查 div 的样式，它是带有 padding-top 的图像的包装 div，在这种情况下，保持 DIV 1:1 的纵横比是 100%，您可以在此处.img-team-wrap找到有关它的更多信息
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>