html - 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 中的 imgs 相同的背景图像。然后用 opacity:0 隐藏第一个 img ;

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

让我知道这是否适合你

参见> 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>