自举&x2B；CSS：如何设置div'；根据它的宽度，它的高度是多少？

我想从这开始

对此

在第一种情况下，

img

具有宽度响应。使用bootstrap的

.img responsive

将其

宽度设置为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>

但是，使用Bootstrap的网格定义每个
的宽度，我不想将其witdh和height设置为固定值。也就是说，我希望每个
或其容器根据
列md-*
进行缩放

如果不使用固定的宽度和高度，我如何做到这一点？或者简单地说，根据宽度设置高度？（或者仅仅是如何制作正方形）
在使用Bootstrap的网格构建时，我也遇到过类似的需求。我转向JavaScript（需要jQuery）来纠正这种情况。以下是我的解决方案：

它被称为
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');

我希望这个功能对您有所帮助。如果您对功能、改进意见等有任何疑问，请务必告诉我

祝你好运
 这对我来说非常有用！
squareThis('.square-grid');