Question

我正在使用bootstrap 3来设置布局，并且在调整图像大小方面存在问题。我在一列中有一个图像，然后在4x4网格中右边的另一列中有4个图像。我希望第一张图像始终保持与其他4图像相同的高度，因此底部的图像是齐平的。

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

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

1 个答案: