Question

我想离开这里 enter image description here

到这个

enter image description here

在第一个中，img响应宽度。其width设置为100％，使用bootstrap的.img-responsive。

然而，为了在第二张照片中达到预期的效果，我们不得不遗漏部分图像。要做到这一点，一种方法是将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>的宽度。我不想将其witdh和height设置为固定值。也就是说，我希望每个<img>或其容器根据col-md-*进行扩展。

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

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');

我希望这个功能可以帮到你。如果您对功能，改进想法等有任何疑问，请告诉我。

祝你好运！

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

1 个答案: