高度等于dynamic宽度（CSSstream体布局）
是否可以设置宽度相同的高度（比例1：1）？
例
+----------+ | body | | 1:3 | | | | +------+ | | | div | | | | 1:1 | | | +------+ | | | | | | | | | | | +----------+ CSS
div { width: 80%; height: same-as-width }
使用jQuery你可以做到这一点
var cw = $('.child').width(); $('.child').css({'height':cw+'px'});
在http://jsfiddle.net/n6DAu/1/查看工作示例;
[更新：虽然我独立发现了这个技巧，但是我知道蒂埃里·科布伦茨（Thierry Koblentz）打败了我。 你可以在A List Apart上find他2009年的文章 。 信用到期的信用。]
我知道这是一个古老的问题，但我遇到了类似的问题，我只用CSS解决。 这是我的博客post ，讨论解决scheme。 在post中包含一个实例 。 代码在下面转贴。
HTML：
<div id="container"> <div id="dummy"></div> <div id="element"> some text </div> </div>
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>
有一种使用CSS的方法！
如果您根据父容器设置宽度，则可以将高度设置为0，并将填充底部设置为将根据当前宽度计算的百分比：
.some_element { position: relative; width: 20%; height: 0; padding-bottom: 20%; }
这适用于所有主stream浏览器。
这是可能的，没有任何Javascript的:)
本文完全描述 – http://www.mademyday.de/css-height-equals-width-with-pure-css.html
HTML：
<div class='box'> <div class='content'>Aspect ratio of 1:1</div> </div>
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%; }
简单和neet：根据视口的宽度使用vw单位的响应高度/宽度。
vw：视口宽度的1/100。 （ 来源MDN ）
DEMO
HTML：
<div></div>
1：1宽高比的CSS ：
div{ width:80vw; height:80vw; /* same as width */ }
表根据所需长宽比和元素宽度来计算高度。
aspect ratio | multiply width by ----------------------------------- 1:1 | 1 1:3 | 3 4:3 | 0.75 16:9 | 0.5625
这种技术可以让你：
- 在元素中插入任何内容，而不使用
position:absolute; - 没有不必要的HTML标记（只有一个元素）
- 根据使用vh单位的视口的高度调整元素纵横比
- 您可以根据视口的高度和宽度，制作一个总是适合视口的响应方形或其他纵横比（请参阅此答案： 根据视口或此演示的 宽度和高度的响应方形 ）
这些单位是由IE9支持+请参阅canIuse的更多信息
非常简单的方法jsfiddle
HTML
<div id="container"> <div id="element"> some text </div> </div>
CSS
#container { width: 50%; /* desired width */ } #element { height: 0; padding-bottom: 100%; }
通过扩展顶部/底部填充技术，可以使用伪元素来设置元素的高度。 使用溢出，浮动和负边距从视图和stream中移除伪元素。
这使您可以将内容放入框中，而无需使用额外的div和/或CSS定位。
.fixed-ar { overflow: hidden; } .fixed-ar:before { content: ""; float: left; margin-left: -10px; width: 10px; padding-top: 100%; } .fixed-ar-4-3:before { /* 100 * 3 / 4 = 75 */ padding-top: 75%; } .fixed-ar-16-9:before { /* 100 * 9 / 16 = 56.25 */ padding-top: 56.25%; } /* examples */ .fixed-ar { margin: 1em 0; max-width: 400px; color: #999; background: #EEE url(http://lorempixel.com/640/480/food/5/) center no-repeat; background-size: contain; }
<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>
真的这是属于纳森的回答评论，但我不允许这样做…
即使箱子里装的东西太多，我也想保持宽高比。 他的例子扩大了高度，改变了长宽比。 我发现添加
overflow: hidden; overflow-x: auto; overflow-y: auto;
对这个元素的帮助。 见http://jsfiddle.net/B8FU8/3111/
