Javascript 高度等于动态宽度（CSS 流体布局）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5445491/
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
Height equal to dynamic width (CSS fluid layout)
提问by Thomas Norman
Is it possible to set same height as width (ratio 1:1)?
是否可以设置与宽度相同的高度（比例为 1:1）？
Example
例子
+----------+
| body |
| 1:3 |
| |
| +------+ |
| | div | |
| | 1:1 | |
| +------+ |
| |
| |
| |
| |
| |
+----------+
CSS
CSS
div {
width: 80%;
height: same-as-width
}
采纳答案by Hussein
Using jQuery you can achieve this by doing
使用 jQuery，您可以通过执行此操作来实现此目的
var cw = $('.child').width();
$('.child').css({'height':cw+'px'});
Check working example at http://jsfiddle.net/n6DAu/1/
在http://jsfiddle.net/n6DAu/1/检查工作示例
回答by Nathan Ryan
[Update: Although I discovered this trick independently, I've since learned that Thierry Koblentzbeat me to it. You can find his 2009 articleon A List Apart. Credit where credit is due.]
[更新：虽然我是独立发现这个技巧的，但后来我知道蒂埃里·科布伦茨打败了我。您可以在 A List Apart 上找到他2009 年的文章。信用到期的信用。]
I know this is an old question, but I encountered a similar problem that I didsolve only with CSS. Here is my blog postthat discusses the solution. Included in the post is a live example. Code is reposted below.
我知道这是一个老问题，但我遇到了类似的问题，我也只能解决与CSS。这是我讨论解决方案的博客文章。帖子中包含一个活生生的例子。代码在下面重新发布。
HTML:
HTML：
<div id="container">
<div id="dummy"></div>
<div id="element">
some text
</div>
</div>
CSS:
CSS：
#container {
display: inline-block;
position: relative;
width: 50%;
}
#dummy {
margin-top: 75%; /* 4:3 aspect ratio */
}
#element {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: silver /* show me! */
}
#container {
display: inline-block;
position: relative;
width: 50%;
}
#dummy {
margin-top: 75%;
/* 4:3 aspect ratio */
}
#element {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: silver/* show me! */
}<div id="container">
<div id="dummy"></div>
<div id="element">
some text
</div>
</div>回答by Kristijan
There is a way using CSS!
有一种使用 CSS 的方法！
If you set your width depending on the parent container you can set the height to 0 and set padding-bottom to the percentage which will be calculated depending on the current width:
如果根据父容器设置宽度，则可以将高度设置为 0 并将 padding-bottom 设置为将根据当前宽度计算的百分比：
.some_element {
position: relative;
width: 20%;
height: 0;
padding-bottom: 20%;
}
This works well in all major browsers.
这适用于所有主要浏览器。
JSFiddle: https://jsfiddle.net/ayb9nzj3/
JSFiddle：https://jsfiddle.net/ayb9nzj3/
回答by Sathran
It is possible without any Javascript :)
没有任何 Javascript 也是可能的 :)
This article describes it perfectly - http://www.mademyday.de/css-height-equals-width-with-pure-css.html
这篇文章完美地描述了它 - http://www.mademyday.de/css-height-equals-width-with-pure-css.html
The HTML:
HTML：
<div class='box'>
<div class='content'>Aspect ratio of 1:1</div>
</div>
The CSS:
CSS：
.box {
position: relative;
width: 50%; /* desired width */
}
.box:before {
content: "";
display: block;
padding-top: 100%; /* initial ratio of 1:1*/
}
.content {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
/* Other ratios - just apply the desired class to the "box" element */
.ratio2_1:before{
padding-top: 50%;
}
.ratio1_2:before{
padding-top: 200%;
}
.ratio4_3:before{
padding-top: 75%;
}
.ratio16_9:before{
padding-top: 56.25%;
}
回答by web-tiki
Simple and neet :use vwunits for a responsive height/width according to the viewport width.
简单和 neet ：vw根据视口宽度使用响应高度/宽度的单位。
vw :1/100th of the width of the viewport. (Source MDN)
vw ：视口宽度的 1/100。（源 MDN）
HTML:
HTML：
<div></div>
CSSfor a 1:1 aspect ratio:
1:1 纵横比的CSS：
div{
width:80vw;
height:80vw; /* same as width */
}
Table to calculate height according to the desired aspect ratio and width of element.
根据元素的所需纵横比和宽度计算高度的表格。
aspect ratio | multiply width by
-----------------------------------
1:1 | 1
1:3 | 3
4:3 | 0.75
16:9 | 0.5625
This technique allows you to :
此技术允许您：
- insert any content inside the element without using
position:absolute; - no unecessary HTML markup (only one element)
- adapt the elements aspect ratio according to the height of the viewport using vh units
- you can make a responsive square or other aspect ratio that alway fits in viewport according to the height and width of the viewport (see this answer : Responsive square according to width and height of viewportor this demo)
- 在元素内插入任何内容而不使用
position:absolute; - 没有不必要的 HTML 标记（只有一个元素）
- 使用 vh 单位根据视口的高度调整元素纵横比
- 您可以根据视口的高度和宽度制作始终适合视口的响应式正方形或其他纵横比（请参阅此答案：根据视口的宽度和高度或此演示的响应式正方形）
These units are supported by IE9+ see canIuse for more info
IE9+ 支持这些单位，请参阅canIuse 了解更多信息
回答by Ninjakannon
回答by Salman A
Expanding upon the padding top/bottom technique, it is possible to use a pseudo element to set the height of the element. Use float and negative margins to remove the pseudo element from the flow and view.
扩展填充顶部/底部技术，可以使用伪元素来设置元素的高度。使用浮动和负边距从流和视图中删除伪元素。
This allows you to place content inside the box without using an extra div and/or CSS positioning.
这允许您在不使用额外 div 和/或 CSS 定位的情况下将内容放置在框内。
.fixed-ar::before {
content: "";
float: left;
width: 1px;
margin-left: -1px;
}
.fixed-ar::after {
content: "";
display: table;
clear: both;
}
/* proportions */
.fixed-ar-1-1::before {
padding-top: 100%;
}
.fixed-ar-4-3::before {
padding-top: 75%;
}
.fixed-ar-16-9::before {
padding-top: 56.25%;
}
/* demo */
.fixed-ar {
margin: 1em 0;
max-width: 400px;
background: #EEE url(https://lorempixel.com/800/450/food/5/) center no-repeat;
background-size: contain;
}<div class="fixed-ar fixed-ar-1-1">1:1 Aspect Ratio</div>
<div class="fixed-ar fixed-ar-4-3">4:3 Aspect Ratio</div>
<div class="fixed-ar fixed-ar-16-9">16:9 Aspect Ratio</div>回答by craq
really this belongs as a comment to Nathan's answer, but I'm not allowed to do that yet...
I wanted to maintain the aspect ratio, even if there is too much stuff to fit in the box. His example expands the height, changing the aspect ratio. I found adding
这真的属于对 Nathan 的回答的评论，但我还不允许这样做......
我想保持纵横比，即使盒子里有太多东西放不下。他的例子扩大了高度，改变了纵横比。我发现添加
overflow: hidden;
overflow-x: auto;
overflow-y: auto;
to the .element helped. See http://jsfiddle.net/B8FU8/3111/
对 .element 有帮助。见http://jsfiddle.net/B8FU8/3111/
回答by Andy Dickinson
width: 80vmin; height: 80vmin;
宽度：80vmin；高度：80vmin；
CSS does 80% of the smallest view, height or width
CSS 处理 80% 的最小视图、高度或宽度
