高度等于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/

宽度:80vmin; 身高:80vmin;

CSS做最小的视图,高度或宽度的80%

http://caniuse.com/#feat=viewport-units