Bootstrap - 使列内的图像具有相同的高度？

Question

如何使列内的图像具有相同的高度？

我正在尝试制作像site这样的网格布局。

这是我对bootsrap的尝试。

但我无法达到同样的高度：

代码：

<div class="container">
    <div class="row">

        <div class="col-md-3 col-sm-3">
            <div class="col-md-12 col-sm-12"><a href="#" class="grid-item"> <img class="img-responsive" src="http://placehold.it/800x1200" alt=""> </a>
            </div>
        </div>

        <div class="col-md-6 col-sm-6">
            <div class="col-md-12 col-sm-12"> <a href="#" class="grid-item"> <img class="img-responsive" src="http://placehold.it/800x600" alt=""> </a>
            </div>
        </div>

        <div class="col-md-3 col-sm-3">
            <div class="col-md-12 col-sm-12"> <a href="#" class="grid-item"> <img class="img-responsive" src="http://placehold.it/800x600" alt=""> </a>
            </div>
            <div class="col-md-12 col-sm-12"> <a href="#" class="grid-item"> <img class="img-responsive" src="http://placehold.it/800x600" alt=""> </a>
            </div>
        </div>

    </div>

    <div class="row">

         <div class="col-md-3 col-sm-3">
            <div class="col-md-12 col-sm-12"> <a href="#" class="grid-item"> <img class="img-responsive" src="http://placehold.it/800x600" alt=""> </a>
            </div>
            <div class="col-md-12 col-sm-12"> <a href="#" class="grid-item"> <img class="img-responsive" src="http://placehold.it/800x600" alt=""> </a>
            </div>
        </div>

        <div class="col-md-3 col-sm-3">
            <div class="col-md-12 col-sm-12"><a href="#" class="grid-item"> <img class="img-responsive" src="http://placehold.it/800x1200" alt=""> </a>
            </div>
        </div>

        <div class="col-md-6 col-sm-6">
            <div class="col-md-12 col-sm-12"> <a href="#" class="grid-item"> <img class="img-responsive" src="http://placehold.it/800x600" alt=""> </a>
            </div>
        </div>

    </div>

    <div class="row">

        <div class="col-md-6 col-sm-6">
            <div class="col-md-12 col-sm-12"> <a href="#" class="grid-item"> <img class="img-responsive" src="http://placehold.it/800x600" alt=""> </a>
            </div>
        </div>

        <div class="col-md-3 col-sm-3">
            <div class="col-md-12 col-sm-12"> <a href="#" class="grid-item"> <img class="img-responsive" src="http://placehold.it/800x600" alt=""> </a>
            </div>
            <div class="col-md-12 col-sm-12"> <a href="#" class="grid-item"> <img class="img-responsive" src="http://placehold.it/800x600" alt=""> </a>
            </div>
        </div>

        <div class="col-md-3 col-sm-3">
            <div class="col-md-12 col-sm-12"><a href="#" class="grid-item"> <img class="img-responsive" src="http://placehold.it/800x1200" alt=""> </a>
            </div>
        </div>

    </div>
</div>

我需要在图像方面做这件事吗？如果是这样，我应该遵守什么尺寸的图像？

或者我应该在javascript端或CSS上使用它？

或者我应该使用哪个插件？

有什么想法吗？

Answer 1

我告诉你如何实现你想要的目标。

是使用background-images而不是图像。首先，使列等于高度，然后使用与放在.grid-items中的图像相同的背景图像。然后用opacity:0隐藏第一个img;

你需要保留原始的imgs，以便grid-items具有物理高度

如果这对您有用，请告诉我

参见＆gt;的 jsfiddle

CSS中使用的代码

.grid-item {
    display: block;
    margin: 0 5px;
    border: 1px solid red;
    height:100%;
}
.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
    padding-left: 0;
    padding-right: 0;
}


.row {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display:         flex;
  flex-wrap: wrap;
  margin:10px 0;
}
.row > [class*='col-'] {
  display: flex;
  flex-direction: column;

}
.row > [class*='col-'] > [class*='col-'] {
  height:100%;
}
a.grid-item img { opacity:0}
a.grid-item { background-size:cover }

.col-md-3 .col-md-12 + .col-md-12 {
  margin-top:10px;
}

HTML

<div class="container">
<div class="row">

    <div class="col-md-3 col-sm-3">
        <div class="col-md-12 col-sm-12"><a href="#" class="grid-item" style="background-image:url('http://placehold.it/800x1200')"> <img class="img-responsive" src="http://placehold.it/800x1200" alt=""> </a>
        </div>
    </div>

    <div class="col-md-6 col-sm-6">
        <div class="col-md-12 col-sm-12"> <a href="#" class="grid-item" style="background-image:url('http://placehold.it/800x600')"> <img class="img-responsive" src="http://placehold.it/800x600" alt=""> </a>
        </div>
    </div>

    <div class="col-md-3 col-sm-3">
        <div class="col-md-12 col-sm-12"> <a href="#" class="grid-item" style="background-image:url('http://placehold.it/800x600')"> <img class="img-responsive" src="http://placehold.it/800x600" alt=""> </a>
        </div>
        <div class="col-md-12 col-sm-12"> <a href="#" class="grid-item" style="background-image:url('http://placehold.it/800x600')"> <img class="img-responsive" src="http://placehold.it/800x600" alt=""> </a>
        </div>
    </div>

</div>

<div class="row">

     <div class="col-md-3 col-sm-3">
        <div class="col-md-12 col-sm-12"> <a href="#" class="grid-item" style="background-image:url('http://placehold.it/800x600')"> <img class="img-responsive" src="http://placehold.it/800x600" alt=""> </a>
        </div>
        <div class="col-md-12 col-sm-12"> <a href="#" class="grid-item" style="background-image:url('http://placehold.it/800x600')"> <img class="img-responsive" src="http://placehold.it/800x600" alt=""> </a>
        </div>
    </div>

    <div class="col-md-3 col-sm-3">
        <div class="col-md-12 col-sm-12"><a href="#" class="grid-item" style="background-image:url('http://placehold.it/800x1200')"> <img class="img-responsive" src="http://placehold.it/800x1200" alt=""> </a>
        </div>
    </div>

    <div class="col-md-6 col-sm-6">
        <div class="col-md-12 col-sm-12"> <a href="#" class="grid-item" style="background-image:url('http://placehold.it/800x600')"> <img class="img-responsive" src="http://placehold.it/800x600" alt=""> </a>
        </div>
    </div>

</div>

<div class="row">

    <div class="col-md-6 col-sm-6">
        <div class="col-md-12 col-sm-12"> <a href="#" class="grid-item" style="background-image:url('http://placehold.it/800x600')"> <img class="img-responsive" src="http://placehold.it/800x600" alt=""> </a>
        </div>
    </div>

    <div class="col-md-3 col-sm-3">
        <div class="col-md-12 col-sm-12"> <a href="#" class="grid-item" style="background-image:url('http://placehold.it/800x600')"> <img class="img-responsive" src="http://placehold.it/800x600" alt=""> </a>
        </div>
        <div class="col-md-12 col-sm-12"> <a href="#" class="grid-item" style="background-image:url('http://placehold.it/800x600')"> <img class="img-responsive" src="http://placehold.it/800x600" alt=""> </a>
        </div>
    </div>

    <div class="col-md-3 col-sm-3">
        <div class="col-md-12 col-sm-12"><a href="#" class="grid-item" style="background-image:url('http://placehold.it/800x1200')"> <img class="img-responsive" src="http://placehold.it/800x1200" alt=""> </a>
        </div>
    </div>

</div>
</div>