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

【问题标题】：Bootstrap - make the images inside the column with the same height?Bootstrap - 使列内的图像具有相同的高度？
【发布时间】：2017-02-10 17:11:44
【问题描述】：

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

我正在尝试制作像 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 上对其进行处理？

或者我应该使用的插件？

有什么想法吗？

【问题讨论】：

您是否尝试过 bootstrap 中的 .row-eq-height 类？ getbootstrap.com.vn/examples/equal-height-columns 正在使用 flexbox
@MihaiT 使列具有相同的高度。我正在寻找具有相同高度的图像。
另外，当您在较小的屏幕上时，.row-eq-height 会导致错误。即使您在大屏幕和中屏幕上使用 col-md-4 并希望这 3 列在小屏幕上变成 1 列，它也会强制 3 列保持不变。

标签： html css twitter-bootstrap grid grid-layout

【解决方案1】：

我给你做了一个例子，说明如何实现你想要的。

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

您需要保留原始图像，以便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>

【讨论】：

感谢您的回答。但我不明白你为什么在 css 中有这个 a.grid-item { background:url("http://placehold.it/800x600") no-repeat scroll center top / cover } .col-md-3 .col-md-12 + .col-md-12 { margin-top:10px; }
那么 html 上 800x1200 和其他 800x600 的图像会发生什么？
正如我解释的那样。原始 imgs 必须保留在 html 中，因为如果您删除它们或在它们上使用 display:none，.grid-items 将没有任何 height 。在他们的帮助下，您可以在行（和列）上设置所需的高度。但是你用opacity:0 隐藏它们并为每一列添加不同的背景图像。在我的示例中，我只添加了一个 img 作为背景。但是您需要为每个 col 添加一个背景图像。这是我认为您可以使所有列的高度相等并且 imgs 填充整个列的唯一方法
用新的 JSFIDDLE + html 编辑了我的答案，这样你就可以看到发生了什么。让我知道它是否适合你
很高兴我能帮上忙。干杯：D