是否可以设置与宽度相同的高度（比例 1:1）？
例子
+----------+
| body |
| 1:3 |
| |
| +------+ |
| | div | |
| | 1:1 | |
| +------+ |
| |
| |
| |
| |
| |
+----------+
CSS
div {
width: 80%;
height: same-as-width
}
[更新：虽然我独立发现了这个技巧，但我知道蒂埃里科布伦茨打败了我。您可以在 A List Apart 上找到他2009 年的文章。信用到期的信用。]
我知道这是一个老问题，但我遇到了一个类似的问题，我只用 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! */
}<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%;
}
这适用于所有主要浏览器。
没有任何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%;
}
简单而整洁：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;IE9+ 支持这些单位，请参阅canIuse 了解更多信息
使用 jQuery，你可以通过这样做来实现这一点
var cw = $('.child').width();
$('.child').css({'height':cw+'px'});
HTML
<div id="container">
<div id="element">
some text
</div>
</div>
CSS
#container {
width: 50%; /* desired width */
}
#element {
height: 0;
padding-bottom: 100%;
}
扩展顶部/底部填充技术，可以使用伪元素来设置元素的高度。使用浮动和负边距从流和视图中删除伪元素。
这允许您将内容放置在框内，而无需使用额外的 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>真的这属于对内森回答的评论，但我还不允许这样做......
我想保持纵横比，即使盒子里放不下太多东西。他的例子扩大了高度，改变了纵横比。我发现添加
overflow: hidden;
overflow-x: auto;
overflow-y: auto;
对 .element 有帮助。见http://jsfiddle.net/B8FU8/3111/