Question

我正在制作几页，每页15-20张图片，并寻找通过4-3-1网格排列的方式。像这样：

<div class="container">
  <div class="row">
    <div class="col-sm-4 col-md-3">
        <img src="http://placehold.it/350x150" class="img-responsive thumbnail">
    </div>
    <div class="col-sm-4 col-md-3">
        <img src="http://placehold.it/350x150" class="img-responsive thumbnail">
    </div>
    <div class="col-sm-4 col-md-3">
        <img src="http://placehold.it/350x150" class="img-responsive thumbnail">
    </div>
    <div class="col-sm-4 col-md-3">
        <img src="http://placehold.it/350x150" class="img-responsive thumbnail">
    </div>

    <!-- some more divs here -->

    <div class="col-sm-4 col-md-3">
        <img src="http://placehold.it/350x150" class="img-responsive thumbnail">
    </div>
  </div>
</div>

我对这种外观感到满意，但是，只要我们介绍尺寸略有不同的图片，就会出现问题。

Fiddle preview到下面的代码块。

<div class="container">
  <div class="row">
    <div class="col-sm-4 col-md-3">
      <img src="http://placehold.it/350x150" class="img-responsive thumbnail">
    </div>
    <div class="col-sm-4 col-md-3">
      <img src="http://placehold.it/300x150" class="img-responsive thumbnail">
    </div>
    <div class="col-sm-4 col-md-3">
      <img src="http://placehold.it/350x125" class="img-responsive thumbnail">
    </div>
    <div class="col-sm-4 col-md-3">
      <img src="http://placehold.it/300x125" class="img-responsive thumbnail">
    </div>

    <!-- some more divs here -->

    <div class="col-sm-4 col-md-3">
      <img src="http://placehold.it/330x130" class="img-responsive thumbnail">
    </div>
  </div>
</div>

现在详情。我不知道如何完成它，但我看到了两种可能的方法来解决这个问题：a）将每一张图片调整为“标准”（比方说350x150px） - 这必须在浏览器端完成;或b）垂直对齐显示的行内的图片，4-3-1网格必须保留。我也曾试图弄乱row-eq-height课，但这并没有让我走得太远。

你会如何解决这个问题？为什么？

感谢您的时间和知识。

Answer 1

看起来问题在于您将所有内容放在一行中。如果您只连续放置四个图像，即使图像高度不同，也可以使用。

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
    <div class="row">
        <div class="col-sm-4 col-md-3">
            <img src="http://placehold.it/350x150" class="img-responsive thumbnail" />
        </div>
        <div class="col-sm-4 col-md-3">
            <img src="http://placehold.it/300x150" class="img-responsive thumbnail" />
        </div>
        <div class="col-sm-4 col-md-3">
            <img src="http://placehold.it/350x125" class="img-responsive thumbnail" />
        </div>
        <div class="col-sm-4 col-md-3">
            <img src="http://placehold.it/300x125" class="img-responsive thumbnail" />
        </div>
    </div>
    <div class="row">
        <div class="col-sm-4 col-md-3">
            <img src="http://placehold.it/350x100" class="img-responsive thumbnail" />
        </div>
        <div class="col-sm-4 col-md-3">
            <img src="http://placehold.it/300x150" class="img-responsive thumbnail">
        </div>
        <div class="col-sm-4 col-md-3">
            <img src="http://placehold.it/320x120" class="img-responsive thumbnail">
        </div>
        <div class="col-sm-4 col-md-3">
            <img src="http://placehold.it/350x150" class="img-responsive thumbnail">
        </div>
      </div>
  <div class="row">
        <div class="col-sm-4 col-md-3">
            <img src="http://placehold.it/300x130" class="img-responsive thumbnail">
        </div>
        <div class="col-sm-4 col-md-3">
            <img src="http://placehold.it/320x150" class="img-responsive thumbnail">
        </div>
        <div class="col-sm-4 col-md-3">
            <img src="http://placehold.it/320x100" class="img-responsive thumbnail">
        </div>
        <div class="col-sm-4 col-md-3">
            <img src="http://placehold.it/300x100" class="img-responsive thumbnail">
        </div>
    </div>
  <div class="row">
        <div class="col-sm-4 col-md-3">
            <img src="http://placehold.it/330x150" class="img-responsive thumbnail">
        </div>
        <div class="col-sm-4 col-md-3">
            <img src="http://placehold.it/350x120" class="img-responsive thumbnail">
        </div>
        <div class="col-sm-4 col-md-3">
            <img src="http://placehold.it/330x130" class="img-responsive thumbnail">
        </div>
    </div>
</div>

＆＃13;

Answer 2

你可以通过几种方式来做这件事。如果您不想将所有图像的大小调整为相同的高度和宽度。

您可能在 Fiddle Here 中使用了这些选项。

第一张图片（左上角）使用此...

.image-1 {
    background-image: url(http://placehold.it/550x350);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    background-color: bisque;
}

使用上面的内容，您将失去顶部和底部的覆盖范围，但是您的区块将保持相同的高度并继续使用引导程序。

然后以下3张图片使用此...

.image-2 {
    background-image: url(http://placehold.it/350x150);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

唯一的区别是你可以看到background-size:。

当我们使用background-position：center;我们将图像聚焦在中心上，当图像调整大小时，它将保持焦点，但会丢失图像的外部视图。如果您调整窗口大小，您将在小提琴中看到。执行此操作（调整大小），以便您可以观看所有图像以及调整大小时的行为方式。我将每个div设置为一个整体高度。

主套装下方还有另一组图像，所有图像都设置为相同的图像尺寸，因此您实际上也可以看到它们如何随上述选项变化。

显然使用bootstrap并尝试使用不同的高度块总是一个问题，但这些演示选项可以帮助你做你想做的事情。

Bootstrap 3.3.4图片网格

2 个答案: