Bootstrap + CSS:如何根据它的宽度设置一个div的高度?(复制)

This question already has an answer here:

这个问题已经有了答案:

• Maintain the aspect ratio of a div with CSS 19 answers
• 使用CSS 19答案维护div的纵横比

I want to go from this

我想从这里开始

to this

这个

In the first one, the img is responsive widthly. Its width is set to 100%, using bootstrap's .img-responsive.

在第一个，img是响应宽度。它的宽度设置为100%，使用bootstrap的。img-responsive。

However, to achieve the desired effect in second pic, we have to leave out part of the images'. To do this, one approach is to set the container of img to a fixed width and height, code goes like this:

然而，为了在第二张图中达到想要的效果，我们必须去掉部分图像。为此，一种方法是将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>

(To use folloing approach, delete the `img-responsive' helper above.)

(要使用折叠方法，请删除上面的“img响应”助手。)

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

However, using Bootstrap's grid to define every <div>'s width.,I don't want to set its witdh and height to a fixed value. That is, I want each <img> or its container to scale according to the col-md-*.

但是，使用Bootstrap的网格来定义每个

的宽度。，我不想把它的witdh和高度设为一个固定值。也就是说，我希望每个 或它的容器按colmd -md-*进行伸缩。

How can I do that, without using fixed width and height? Or put it simply, to set the height according to the width? (or just how to make a square)

没有固定的宽度和高度，我怎么能做到呢?或者简单地说，根据宽度设置高度?(或者只是如何做一个正方形)

1 个解决方案

#1

I have faced a similar need when building with Bootstrap's grid. I turned to JavaScript (requires jQuery) in order to remedy the situation. Here is my solution: https://gist.github.com/SimpleAnecdote/d74412c7045d247359ed

在使用Bootstrap的网格构建时，我也遇到了类似的需要。为了补救这种情况，我求助于JavaScript(需要jQuery)。这里是我的解决方案:https://gist. github.com/simple轶闻/d74412c7045d247359ed

It's called squareThis() because at first I used it only to make elements square, then I expanded it to mould any element into a rectangle with the help of a ratio. All you need to do is call the function after DOM is ready with any jQuery selector, #ID or .class:

它被称为squareThis()，因为一开始我只使用它来将元素做成正方形，然后我将它展开，在一个比率的帮助下将任何元素塑造成一个矩形。您所需要做的就是在DOM使用jQuery选择器、#ID或.class准备好之后调用函数:

squareThis('.classOfElementsToBeSquared');

The example above will default ot a ratio of 1:1 which will create a square. You may also call the function like this as well:

上面的示例将默认为1:1的比例，这将创建一个正方形。你也可以这样称呼这个函数:

squareThis('.classOfElementsToBeMoulded', 0.67);

Which will create a 2:3 ratio rectangle (horizontal). You may also:

它将创建一个2:3的比例矩形(水平)。您还可以:

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

Which will create squares out of your elements ONLY if the viewport is bigger than 300px.

只有当viewport大于300px时，它才会从元素中创建平方。

In your case, I would use Bootstrap's col-md-* classes, add to all the grid elements a class like .square-grid and then:

在您的例子中，我将使用Bootstrap的coll -md-*类，将.square-grid这样的类添加到所有网格元素中，然后:

squareThis('.square-grid');

I hope this function helps you. Please do let me know if you've got any questions about the function, ideas for improvement, etc.

我希望这个函数对你有帮助。如果您对这个功能有什么问题，有什么改进意见，请告诉我。

Good luck!

好运！