画廊高度比例

Question

我正在尝试使用Twitter Bootstrap设置图片库，但在将高度设置为完全相同的高度时遇到一些麻烦。

我想在所有间隙（小图像和大图像之间）之间实现30px的填充。

这是我的代码：

<section>
  <div class="container">
    <div class="row">
      <div class="gallery__wrapper">
        <div class="gallery__container ">
          <div class="gallery__item gallery__item--small">
            <div class="gallery__item--media"><img src="https://dummyimage.com/810x461/e0e0e0/000000.jpg" alt=""></div>
          </div>
          <div class="gallery__item gallery__item--small">
            <div class="gallery__item--media"><img src="https://dummyimage.com/810x461/e0e0e0/000000.jpg" alt=""></div>
          </div>
        </div>
        <div class="gallery__container">
          <div class="gallery__item gallery__item--large">
            <div class="gallery__item--media"><img src="https://dummyimage.com/810x964/e0e0e0/000000.jpg" alt=""></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

https://codepen.io/anon/pen/QoeXYN

在xl屏幕上可以，两列具有相同的高度，但是对于lg，md屏幕，大图像较短。如何获得相同的高度并在图像之间保持相同的间距？