Question

我这里有一些混杂的概念。 Im试图实现的目标是，在一组引导程序容器中，将flexbox与引导程序列结合，并根据其容器调整最后一个图像（“ img-team”）的大小。它们正在根据宽度而不是高度进行调整。当高度超过容器时会变大。 HTML中发生的事情是一个大容器设置了height属性。然后在细分中，空间根据flex-grow：1或非flex：0进行划分。

假装我希望图像适应该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>

无图像。一切正常，一切顺利。
有图片。包含不再适合（仅适合宽度而不适合高度）。这就是为什么我认为是图像的原因。

Answer 1

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

检查div .img-team-wrap的样式，它是具有padding-top图像的包装div，在这种情况下，保持DIV 1：1的纵横比为100％，您可以找到更多关于{{ 3}}
而不是使用.img-team中的样式来使图像在div中居中。
还添加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>

结合使用Bootstrap列和FlexBox

1 个答案: