根据需要自动调整图像高度

Question

在自举网格中，我有一列包含两个包含两个正方形图像的列旁边的矩形图像。矩形图像高度等于两个方形图像高度（宽度相同）。 包含图像的每个案例都具有此样式（以及col-xs-12类）：

padding-left: 0;
padding-right: 20px;
padding-bottom: 20px;

每张图片都有：

display: block;
max-width: 100%;

由填充底部引起的垂直间隙使得包含矩形图像的列不会以相同的级别结束：

方案：

我试图将这种风格赋予矩形图像（稍微伸展一下）：

height: calc(100% + 20px); 

（由于填充权限也会改变图像的比例，这可能还不够）

但它没有改变任何东西。奇怪的是，当我给它一个像高度一样的高度：10％或高度110％，它将图像显示到其真实高度，但不显示容器的高度。我知道高度％是棘手的，但是，你有没有解决方法来修复矩形图像的高度，使其适合之前的列高度？

谢谢！

PS：喜欢问，html代码：

<div class="row">
   <div class="col-sm-8">
      <div class="row">
         <div class="col-sm-6 text-sm-left">
            <div class="col-xs-12 moodboard-image-item ">
               <a href="http://fr.lipsum.com/feed/html" class="contains-image-with-overlay">
                  <picture>
                     <source class="img-responsive" srcset="/sites/mysite/files/2018-01/image-mobile-moodboardimg/industriel-mobile_1.jpg" media="(max-width: 767px)">
                     <source class="img-responsive" srcset="/sites/mysite/files/2018-01/image-desktop-moodboardimg/industriel-desktop_1.jpg" media="(min-width: 768px)">
                     <img class="img-responsive" src="/sites/mysite/files/2018-01/image-desktop-moodboardimg/industriel-desktop_1.jpg" alt="Industriel" data-pin-nopin="1">
                  </picture>
                  <div class="moodboard-image-title bg-moodboard-title-black">
                     Industriel
                  </div>
               </a>
            </div>
         </div>
         <div class="col-sm-6 text-sm-center">
            <div class="col-xs-12 moodboard-image-item ">
               <a href="http://fr.lipsum.com/feed/html" class="contains-image-with-overlay">
                  <picture>
                     <source class="img-responsive" srcset="/sites/mysite/files/2018-01/image-mobile-moodboardimg/classique-chic-mobile_0.jpg" media="(max-width: 767px)">
                     <source class="img-responsive" srcset="/sites/mysite/files/2018-01/image-desktop-moodboardimg/classique-chic-desktop_0.jpg" media="(min-width: 768px)">
                     <img class="img-responsive" src="/sites/mysite/files/2018-01/image-desktop-moodboardimg/classique-chic-desktop_0.jpg" alt="Classique chic" data-pin-nopin="1">
                  </picture>
                  <div class="moodboard-image-title bg-moodboard-title-black">
                     Classique chic
                  </div>
               </a>
            </div>
         </div>
      </div>
      <div class="row">
         <div class="col-sm-12 text-sm-left">
            <div class="col-xs-12 moodboard-image-item ">
               <a href="http://fr.lipsum.com/feed/html" class="contains-image-with-overlay">
                  <picture>
                     <source class="img-responsive" srcset="/sites/mysite/files/2018-01/image-mobile-moodboardimg/vintage-mobile_0.jpg" media="(max-width: 767px)">
                     <source class="img-responsive" srcset="/sites/mysite/files/2018-01/image-desktop-moodboardimg/vintage-desktop_0.jpg" media="(min-width: 768px)">
                     <img class="img-responsive" src="/sites/mysite/files/2018-01/image-desktop-moodboardimg/vintage-desktop_0.jpg" alt="Vintage" data-pin-nopin="1">
                  </picture>
                  <div class="moodboard-image-title bg-moodboard-title-black">
                     Vintage
                  </div>
               </a>
            </div>
         </div>
      </div>
   </div>
   <div class="col-sm-4 text-sm-right">
      <div class="col-xs-12 moodboard-image-item adjust-height-to-gaps">
         <a href="http://fr.lipsum.com/feed/html" class="contains-image-with-overlay">
            <picture>
               <source class="img-responsive" srcset="/sites/mysite/files/2018-01/image-mobile-moodboardimg/modern-design-mobile_0.jpg" media="(max-width: 767px)">
               <source class="img-responsive" srcset="/sites/mysite/files/2018-01/image-desktop-moodboardimg/modern-design-desktop_0.jpg" media="(min-width: 768px)">
               <img class="img-responsive" src="/sites/mysite/files/2018-01/image-desktop-moodboardimg/modern-design-desktop_0.jpg" alt="Moderne design" data-pin-nopin="1">
            </picture>
            <div class="moodboard-image-title bg-moodboard-title-black">
               Moderne design
            </div>
         </a>
      </div>
   </div>
</div>