宽度：80vmin; 高度：80vmin;

CSS执行80％的最小视图，高度或宽度

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

确实，这只是对Nathan答案的一种评论，但我还不可以这样做。
即使盒子里装满东西，我也要保持长宽比。他的示例扩大了高度，改变了宽高比。我发现添加

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

到.element的帮助。参见http://jsfiddle.net/B8FU8/3111/

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

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

[更新：尽管我独立地发现了这个技巧，但自那时起我就知道Thierry Koblentz击败了我。您可以在A List Apart上找到他2009年的文章。贷方应付款。]

我知道这是一个老问题，但我遇到了类似的问题，我也只能解决与CSS。这是我的博客文章，讨论了该解决方案。帖子中包含一个实时示例。代码在下面重新发布。

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，并将padding-bottom设置为将根据当前宽度计算的百分比：

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

这在所有主流浏览器中都可以正常运行。

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

jsfiddle极其简单的方法

的HTML

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

的CSS

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

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

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

vw：视口宽度的1/100。（源MDN）

演示

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。