Html CSS：使 div 宽度与高度成正比
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22673008/
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
CSS: make div width proportional to height
提问by indextwo
This is a little tricky to explain, but: I want a responsive-height div (height: 100%) that will scale the widthproportional to the height(not vice versa).
这是一个有点棘手解释，但我想一个负责任的高度DIV（ height: 100%），将缩放宽度成正比的高度（而不是相反）。
I know of this methodutilising a padding-tophack to make the height proportional to the width, but I need it to work the other way around. Having said that, I'm not hugely keen on the additional requirement of absolutely-positioned elements for the content in that method, so I realise I may well be asking for the moon on a stick here.
我知道这种方法利用padding-tophack 使高度与宽度成正比，但我需要它以相反的方式工作。话虽如此，我并不是非常热衷于该方法中内容的绝对定位元素的额外要求，所以我意识到我很可能在这里要求月球上的棍子。
To help visualise, here is an image:
为了帮助可视化，这里有一个图像：
...and here is a jsFiddle, illustrating pretty much the same thing.
...这是一个jsFiddle，说明了几乎相同的事情。
It is worth noting that I am already using the :beforeand :afterpseudo-elements to vertically-align the content of the box I want to scale proportionally.
值得注意的是，我已经在使用:before和:after伪元素来垂直对齐我想要按比例缩放的框的内容。
I would really, really enjoy not having to revert to jQuery, just because there's going to be an inherent requirement for resize handlers and generally more debugging all round... but if that's my only choice, then fiat.
我真的，真的很喜欢不必恢复到 jQuery，只是因为对调整大小处理程序有一个内在的要求，并且通常需要更多的调试……但如果这是我唯一的选择，那么fiat。
采纳答案by Patrick Kunka
I've been wondering about a pure-css solution to this problem for a while. I finally came up with a solution using ems, which can be progressively enhanced using vws:
我一直想知道这个问题的纯 css 解决方案有一段时间了。我终于想出了一个使用ems的解决方案，可以使用vws逐步增强：
See codepen link for full working demo and explanation:
有关完整的工作演示和说明，请参阅 codepen 链接：
http://codepen.io/patrickkunka/pen/yxugb
http://codepen.io/patrickkunka/pen/yxugb
Simplified version:
简化版：
.parent {
font-size: 250px; // height of container
height: 1em;
}
.child {
height: 100%;
width: 1em; // 100% of height
}
回答by feeela
Oh,you could probably use that "padding-top" trick.
哦，你可能会使用“padding-top”技巧。
width: 50%;
height: 0;
padding-bottom: 50%;
http://absolide.tumblr.com/post/7317210512/full-css-fluid-squares
http://absolide.tumblr.com/post/7317210512/full-css-fluid-squares
Or:
或者：
.square-box{
position: relative;
width: 50%;
overflow: hidden;
background: #4679BD;
}
.square-box:before{
content: "";
display: block;
padding-top: 100%;
}
http://codeitdown.com/css-square-rectangle/
http://codeitdown.com/css-square-rectangle/
The vertical padding in CSS is related to the width of the element, not the height.
CSS 中的垂直填充与元素的宽度有关，而不是与高度有关。
回答by Johan R?nnblom
The font solution requires that the height is known. I have found a solution for making an element proportional inside a parent div with unknown widths and heights. Here is a demo.
字体解决方案要求高度已知。我找到了一种解决方案，可以使元素在宽度和高度未知的父 div 内成比例。这是一个演示。
The trick I'm using is to have an image used as a spacer. The code explained:
我使用的技巧是将图像用作间隔符。代码解释：
<div class="heightLimit">
<img width="2048" height="2048" class="spacer"
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAA
P///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">
<div class="filler">
<div class="proportional">
</div>
</div>
</div>
So it is not the prettiest with two extra divs and a useless image. But it could be worse. The image element needs to have width and height with the desired dimensions. Width and height need to be as large as the maximum size allowed (a feature!).
所以它不是最漂亮的，有两个额外的 div 和一个无用的图像。但情况可能更糟。图像元素需要具有所需尺寸的宽度和高度。宽度和高度需要与允许的最大尺寸一样大（一个功能！）。
The css:
css：
.heightLimit {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: auto;
max-width: 100%;
overflow: hidden;
}
This element is to limit the height, but to expand horizontally (width: auto) although never beyond the parent (max-width). Overflow needs to be hidden because some children will protrude outside the div.
此元素是限制高度，但水平扩展（width: auto）虽然永远不会超出父级（max-width）。溢出需要隐藏，因为有些孩子会突出到div之外。
.spacer {
width: auto;
max-height: 100%;
visibility: hidden;
}
This image is invisible and scaled proportionally to the height, while the width is adjusted and forces the width of the parent to also be adjusted.
此图像不可见并与高度成比例缩放，同时调整宽度并强制调整父级的宽度。
.filler {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
This element is required to fill the space with an absolutely positioned container.
这个元素需要用绝对定位的容器填充空间。
.proportional {
position: relative;
width: 100%;
height: 0;
padding-bottom: 100%;
}
And here our proportional element gets a height proportional to the width with the familiar padding-bottom trick.
在这里，我们的比例元素使用熟悉的填充底部技巧获得与宽度成比例的高度。
Unfortunately, there is a bug in Chrome and IE so if you modify the parent element using Javascript, such as in my demo, the dimensions will not be updated. There is a hack that can be applied to solve that, as shown in my demo.
不幸的是，Chrome 和 IE 中存在一个错误，因此如果您使用 Javascript 修改父元素，例如在我的演示中，尺寸将不会更新。有一个 hack 可以用来解决这个问题，如我的演示所示。
回答by Erwan
You can use view height (vh) as the unity for the width.
您可以使用视图高度 (vh) 作为宽度的单位。
Here is an example with the 20px margin you asked for.
这是您要求的 20px 边距的示例。
.parent {
margin : 20px;
}
.child {
width: calc(100vh - 40px);
height : calc(100vh - 40px);
margin:0 auto;
background: red;
box-sizing:border-box;
padding:10px;
}
See the fiddle : https://jsfiddle.net/svobczp4/
回答by hobberwickey
Based off of @kunkalabs's answer (which is really smart) I've come up with a solution that lets you preserve the inherited font-size.
基于@kunkalabs 的回答（这真的很聪明），我提出了一个解决方案，可以让您保留继承的字体大小。
HTML:
HTML：
<div id='rect'>
<div id='content'>Text</div>
</div>
CSS:
CSS：
#rect {
font-size: 1000%;
height: 1em;
width: 1em;
position: relative;
}
#content {
font-size: 10%;
}
So basically the font-size of #contentis (100 / $rectFontSize) * 100 percent of the rectangle. If you need a definite pixel size for the rectangle, you can set the #rect's parent's font-size…otherwise just adjust the font-size until it's about where you want it to be (and enrage your designer in the process).
所以基本上字体大小#content是 (100 / $rectFontSize) * 100% 的矩形。如果您需要一个确定的矩形像素大小，您可以设置#rect's parent's 的字体大小……否则只需调整字体大小，直到它达到您想要的位置（并在此过程中激怒您的设计师）。
回答by Jakub Muda
You can achieve that by using SVG.
您可以通过使用 SVG 来实现这一点。
It depends on a case, but in some it is really usefull. As an example - you can set background-imagewithout setting fixed height or use it to embed <iframe>with ratio 16:9and position:absolute.
这取决于具体情况，但在某些情况下它确实很有用。例如 - 您可以在background-image不设置固定高度的情况下进行设置，也可以使用它来嵌入<iframe>ratio16:9和position:absolute.
For 3:2ratio set viewBox="0 0 3 2"and so on.
对于3:2比率设置viewBox="0 0 3 2"等。
Example:
例子：
div{width:35%;background-color:red}
svg{width:100%;display:block;visibility:hidden}<div>
<svg viewBox="0 0 3 2"></svg>
</div>回答by Eric Windmeier
Make the parent DIV behave like a table cell and align the child element vertically. No need to do any padding tricks.
使父 DIV 表现得像一个表格单元格并垂直对齐子元素。无需做任何填充技巧。
HTML
HTML
<div class="parent">
<img src="foo.jpg" />
</div>
CSS
CSS
.parent { width:300px; height:300px; display:table-cell; vertical-align:middle; }
