【问题标题】：Height equal to dynamic width (CSS fluid layout) [duplicate]高度等于动态宽度（CSS流体布局）[重复]
【发布时间】：2011-07-23 15:53:32
【问题描述】：

是否可以设置与宽度相同的高度（比例1：1）？

示例

+----------+
| body     |
| 1:3      |
|          |
| +------+ |
| | div  | |
| | 1:1  | |
| +------+ |
|          |
|          |
|          |
|          |
|          |
+----------+

CSS

div {
  width: 80%;
  height: same-as-width
}

【问题讨论】：

在Nathan的解决方案之后，还有❝Kristijan❞的解决方案，更加简单。没有虚拟元素。

标签： javascript jquery html css responsive-design

【解决方案1】：

[更新：虽然我自己发现了这个技巧，但我知道Thierry Koblentz 打败了我。您可以在 A List Apart 上找到他的 2009 article。信用到期。]

我知道这是一个老问题，但我遇到了一个类似的问题，我确实只用 CSS 解决了这个问题。这是我的blog post，讨论了解决方案。帖子中包含live example。代码在下面重新发布。

#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>

【讨论】：

之所以有效，是因为margin/padding-top/bottom，当指定为百分比时，是根据包含元素的width确定的。本质上，您遇到的情况是，可以相对于“水平”属性调整“垂直”属性的大小。这不是漏洞利用或黑客攻击，因为这是 CSS 规范的定义方式。
这可以通过使用:before 伪元素来改进。 #container:before{content:"";display:block;margin-top:100%;}
这是一个伪元素解决方案的小提琴：jsfiddle.net/B8FU8/2441

【解决方案2】：

有一种使用 CSS 的方法！

如果您根据父容器设置宽度，您可以将高度设置为 0，并将 padding-bottom 设置为将根据当前宽度计算的百分比：

.some_element {
    position: relative;
    width: 20%;
    height: 0;
    padding-bottom: 20%;
}

这适用于所有主流浏览器。

JSFiddle：https://jsfiddle.net/ayb9nzj3/

【讨论】：

【解决方案3】：

没有任何 Javascript 也是可能的 :)

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%;
}

【讨论】：

【解决方案4】：

简单而简洁：根据视口宽度使用vw 单位来响应高度/宽度。

vw : 视口宽度的 1/100。 (Source MDN)

DEMO

HTML：

<div></div>

CSS 用于 1:1 的纵横比：

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 单位根据视口的高度调整元素的纵横比
您可以根据视口的高度和宽度制作始终适合视口的响应式正方形或其他纵横比（请参阅此答案：Responsive square according to width and height of viewport 或此demo）

IE9+ 支持这些单位，请参阅canIuse for more info

【讨论】：

【解决方案5】：

使用 jQuery 你可以做到这一点

var cw = $('.child').width();
$('.child').css({'height':cw+'px'});

在http://jsfiddle.net/n6DAu/1/查看工作示例

【讨论】：

【解决方案6】：

极其简单的方法jsfiddle

HTML

<div id="container">
    <div id="element">
        some text
    </div>
</div>

CSS

#container {
    width: 50%; /* desired width */
}

#element {
    height: 0;
    padding-bottom: 100%;
}

【讨论】：

【解决方案7】：

扩展顶部/底部填充技术，可以使用伪元素来设置元素的高度。使用浮动和负边距从流和视图中删除伪元素。

这允许您将内容放置在框内，而无需使用额外的 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>

【讨论】：

【解决方案8】：

这确实属于对内森的回答的评论，但我还不允许这样做......
我想保持纵横比，即使盒子里放不下太多东西。他的例子扩大了高度，改变了纵横比。我发现添加

overflow: hidden;
overflow-x: auto;
overflow-y: auto;

对 .element 有帮助。见http://jsfiddle.net/B8FU8/3111/

【讨论】：

【解决方案9】：

宽度：80vmin；高度：80vmin；

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

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

【讨论】：