Bootstrap + CSS：如何根据宽度设置div的高度？

Question

我想把这个

变成这样

在第一张图片中，img具有响应式的宽度。使用bootstrap的.img-responsive将其width设置为100%。

然而，为了实现第二张图片的期望效果，我们必须省略部分图像。为此，一种方法是将img的容器设置为固定的宽度和高度，代码如下：

<div class="col-md-9">
  <div class="col-md-4 img-container">
    <img src="" class="img-responsive">
  </div>
  <div class="col-md-4"></div>
  <div class="col-md-4"></div>
</div>

（使用以下方法时，请删除上面的“img-responsive”帮助程序。）

.img-container{
  height: 148px;
  width: 148px;
  img{
    max-height: 100%;
    max-width: 100%;
    vertical-align: middle;
  }
}

然而，使用Bootstrap的网格来定义每个<div>的宽度时，我不想将其宽度和高度设置为固定值。也就是说，我希望每个<img>或其容器可以根据col-md-*进行缩放。

如何做到这一点，而不使用固定的宽度和高度？或者简单地说，如何根据宽度设置高度？（或者只是如何制作一个正方形）

- cqcn1991

Answer 1

我在使用Bootstrap的网格布局时遇到了类似的需求。为了解决这个问题，我转向使用JavaScript（需要jQuery）。以下是我的解决方案：https://gist.github.com/SimpleAnecdote/d74412c7045d247359ed 这个函数被称为squareThis()，因为一开始我只用它来使元素变成正方形，后来我扩展了它的功能，可以根据比例将任何元素变成矩形。你只需要在DOM准备好后使用任何jQuery选择器、#ID或.class调用该函数即可。

squareThis('.classOfElementsToBeSquared');

以上示例将默认使用1:1的比例创建一个正方形。您也可以这样调用该函数:

squareThis('.classOfElementsToBeMoulded', 0.67);

这将创建一个2:3比例的矩形（横向）。您还可以：

squareThis('.classOfElementsToBeMoulded', 1, '300');

如果视口大于300px，则可以通过该方法仅从元素中创建正方形。

在您的情况下，我建议使用Bootstrap的col-md-*类，为所有网格元素添加一个类似于.square-grid的类，并执行以下操作：

squareThis('.square-grid');

我希望这个函数能帮到你。如果你对这个函数有任何问题、改进意见等，请告诉我。

祝你好运！

- SimpleAnecdote

---

这对我的目的非常有效！ - Hawkee