Boostrap和Flexbox的等高柱高

Question

我试图使用Bootstrap和Flexbox创建一个库，其中有一个大图像，旁边是两个较小的堆叠图像，并且两者都是相同的高度。

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

它适用于Firefox，如果我在img上使用height: 100%，但在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

看起来对我来说，就好像你需要一个有一侧的多个图像嵌套flexboxes。

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对准那些2图像顶部/底部

添加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">

N OTE，我也去掉了一些你的利润率，使他们更好地对准

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>