Question

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

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

如果我在height: 100%上使用img，则可以在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

在我看来，好像你需要嵌套的灵活盒，你的一面有多个图像。

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

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>

带有Boostrap和Flexbox的等柱高度

2 个答案: