css - Bootstrap 3 - 图像始终与包含行的高度相同

Question

我正在使用 bootstrap 3 来设置布局，但在调整图像大小方面遇到了问题。我在一列中有一个图像，然后在它右侧的另一列中有 4 个图像，在 4x4 网格中。我希望第一张图片始终保持与其他 4 张图片相同的高度，以便底部齐平。

https://jsfiddle.net/DTcHh/

<div class="container-fluid">
   <div class="row no-gutter">


        <div class="col-md-6">
            <img src="http://www.lightswitchcreative.ca/clients/poole/images/image1.jpg" alt="" class="img-responsive" style="border-right: 2px solid #fff;" />
        </div>

        <div class="col-md-6">

             <div class="row">
                <div class="col-md-6">
                    <img src="http://www.lightswitchcreative.ca/clients/poole/images/image5.jpg" alt="" class="img-responsive" style="border: 1px solid #fff;" />
                    <img src="http://www.lightswitchcreative.ca/clients/poole/images/image4.jpg" alt="" class="img-responsive" style="border: 1px solid #fff;" />
                </div>

                <div class="col-md-6">
                    <img src="http://www.lightswitchcreative.ca/clients/poole/images/image3.jpg" alt="" class="img-responsive" style="border: 1px solid #fff;" />
                    <img src="http://www.lightswitchcreative.ca/clients/poole/images/image2.jpg" alt="" class="img-responsive" style="border: 1px solid #fff;" />
                </div>

             </div>

        </div>


   </div>
   </div>

Answer 1

这是 JSfiddle我所做的基本上是让您的 div(列 div)适合该行，然后使左侧的单独图像完全适合具有相同高度和宽度的 col。表格显示允许您的行和列具有相同的高度，在图像中我添加了 100% 的高度

HTML

<div class="container-fluid">
   <div class="row no-gutter match-to-row">
     <div class="col-md-6 col-sm-6 match-to-col">
            <img src="http://www.lightswitchcreative.ca/clients/poole/images/image1.jpg" alt="" class="img-responsive" style="border-right: 2px solid #fff; height:100% !important;" />
        </div>
        <div class="col-md-6 col-sm-6 match-to-col">
                <div class="col-md-6">
                    <img src="http://www.lightswitchcreative.ca/clients/poole/images/image5.jpg" alt="" class="img-responsive" style="border: 1px solid #fff;" />
                    <img src="http://www.lightswitchcreative.ca/clients/poole/images/image4.jpg" alt="" class="img-responsive" style="border: 1px solid #fff;" />
                </div>
                <div class="col-md-6">
                    <img src="http://www.lightswitchcreative.ca/clients/poole/images/image3.jpg" alt="" class="img-responsive" style="border: 1px solid #fff;" />
                    <img src="http://www.lightswitchcreative.ca/clients/poole/images/image2.jpg" alt="" class="img-responsive" style="border: 1px solid #fff;" />

             </div>

       </div>


   </div>
   </div>

CSS

body {
    margin: 10px;
}
.match-to-row{
    display: table;
    overflow: hidden;
}
.match-to-col{
    display: table-cell;
    float: none;
}