使用 Bootstrap 和 Flexbox 等列高度

Question

我正在尝试使用 Bootstrap 和 Flexbox 设置一个画廊的样式，其中有一个大图像，旁边是两个较小的堆叠图像，并且两者的高度相同。

容器列似乎在完成它们的工作并保持相同的高度，但我需要列中的img 来填充容器的高度。

如果我在 img 上使用 height: 100%，它可以在 Firefox 中运行，但这在 Chrome 和 Safari 中都会中断。

img {
  max-width: 100%;
  width: auto\9;
  height: auto;
  vertical-align: middle;
  border: 0;
  -ms-interpolation-mode: bicubic;
}
figure {
  margin-bottom: 0;
}
.rts-col {
  margin-bottom: 30px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="rts-col col-8">
      <figure>
        <img src="http://via.placeholder.com/1400x933">
      </figure>
    </div>
    <div class="rts-col col-4">
      <figure style="margin-bottom: 30px;">
        <img src="http://via.placeholder.com/1400x933">
      </figure>
      <figure>
        <img src="http://via.placeholder.com/1400x933">
      </figure>
    </div>
  </div>
</div>

这是标记和样式表：https://jsfiddle.net/tylorreimer/q8qe5p80/2/

Answer 1

在我看来，您好像需要嵌套的弹性框，其中一侧有多个图像。

img {
  max-width: 100%;
  width: auto\9;
  height: auto;
  vertical-align: middle;
  border: 0;
  -ms-interpolation-mode: bicubic;
}

figure {
  margin: 0;
}

.rts-col.split {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="rts-col col-8">
      <figure>
        <img src="http://via.placeholder.com/1400x933">
      </figure>
    </div>
    <div class="rts-col col-4 split">
      <figure>
        <img src="http://via.placeholder.com/1400x933">
      </figure>
      <figure>
        <img src="http://via.placeholder.com/1400x933">
      </figure>
    </div>

  </div>
</div>

Answer 2

如果您将col-4 设为具有column 方向的弹性容器，则可以使用justify-content 及其space-between 来对齐这两个图像的顶部/底部

将d-flex flex-column justify-content-between 添加到您的<div class="rts-col col-4">，使其变为<div class="rts-col col-4 d-flex flex-column justify-content-between">

请注意，我还删除了一些边距以使它们更好地对齐

img {
  display: block;
  max-width: 100%;
}
figure {
  margin: 0;
}
.rts-col {
  margin-bottom: 30px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="rts-col col-8">
      <figure>
        <img src="http://via.placeholder.com/1400x933">
      </figure>
    </div>
    <div class="rts-col col-4 d-flex flex-column justify-content-between">
      <figure>
        <img src="http://via.placeholder.com/1400x933">
      </figure>
      <figure>
        <img src="http://via.placeholder.com/1400x933">
      </figure>
    </div>
    <div class="rts-col col-6">
      <figure>
        <img src="http://via.placeholder.com/1400x933">
      </figure>
    </div>
    <div class="rts-col col-6">
      <figure>
        <img src="http://via.placeholder.com/1400x933">
      </figure>
    </div>
  </div>
</div>