twitter-bootstrap Bootstrap + CSS：如何根据宽度设置 div 的高度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26084770/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap + CSS: How to set a div's height according to its width?
提问by cqcn1991
I want to go from this
我想离开这里
to this
对此
In the first one, the imgis responsive widthly. Its widthis set to 100%, using bootstrap's .img-responsive.
在第一个中，img响应广泛。它width设置为 100%，使用引导程序的.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-responsive”助手。）
.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 的 grid 来定义<div>each 的宽度。，我不想将其宽度和高度设置为固定值。也就是说，我希望每个<img>或其容器根据col-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)
在不使用固定宽度和高度的情况下，我该怎么做？或者简单地说，根据宽度设置高度？（或只是如何制作正方形）
回答by SimpleAnecdote
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/SimpleAnecdote/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.
只有当视口大于 300 像素时，它才会从您的元素中创建正方形。
In your case, I would use Bootstrap's col-md-*classes, add to all the grid elements a class like .square-gridand then:
在您的情况下，我将使用 Bootstrap 的col-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!
祝你好运！
