为了补充Web_Designer的答案，<div>的高度(完全由底部填充组成)将是其包含元素宽度的75%。这里有一个很好的总结:http://mattsnider.com/css-using-percent-for-margin-and-padding/。我不知道为什么会这样，但事实就是这样。

如果你想让你的div的宽度不是100%，你需要另一个包装div来设置宽度:

div.ar-outer{
    width: 60%; /* container; whatever width you want */
    margin: 0 auto; /* centered if you like */
}
div.ar {
    width:100%; /* 100% of width of container */
    padding-bottom: 75%; /* 75% of width of container */
    position:relative;
}
div.ar-inner {
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
}

我最近使用了类似于Elliot的图像技巧，允许我使用CSS媒体查询来根据设备分辨率提供不同的logo文件，但仍然按照<img>自然会做的比例缩放(我将logo作为背景图像设置为具有正确纵横比的透明。png)。但是Web_Designer的解决方案将为我节省一个http请求。

实际上，高投票的答案是一个非常好的解决方案，但有一个新的CSS功能，名字是长宽比。

它可以这样使用:

.someClass {
  width: 100%;
  aspect-ratio: 4/3;
}

自动确定高度，但请参见兼容性表:

如果浏览器支持对你的项目很重要，不要使用它。使用填充底技术。

我刚刚创建了一个2:1的div，调整大小以占据全宽度，但如果它会导致顶部或底部超过，则会缩小宽度。但是请注意，这只适用于窗口的大小，而不是父窗口的大小。

#scene {
    position: relative;
    top: 50vh;
    left: 50vw;
    width: 100vw;
    height: 50vw;
    max-height: 100vh;
    max-width: calc(100vh * 2);
    transform: translate(-50%, -50%);
}

我相信你可以计算出正确的%，用于4:3而不是2:1。

container {
   height: 100vh;
   width: 100vw;
}
.container div {
   height: 4em;
   width: 3em;
}

虽然大多数答案都很酷，但大多数都要求已经正确大小的图像……其他解决方案只适用于宽度，而不关心可用的高度，但有时您也希望将内容适应于特定的高度。

我试图将它们组合在一起，以带来一个完全可移植和可调整大小的解决方案……诀窍是使用自动缩放图像，但使用内联svg元素，而不是使用预渲染的图像或任何形式的第二个HTTP请求…

div.holder { 背景颜色:红色; 显示:inline-block; 身高:100 px; 宽度:400 px; ｝ svg img { 背景颜色:蓝色; 显示:块; 高度:汽车; 宽度:汽车; max-width: 100%; max-height: 100%; ｝ .content_sizer { 位置:相对; 显示:inline-block; 高度:100%; ｝ .content { 位置:绝对的; 上图:0; 底部:0; 左:0; 右:0; background - color: rgba(155255年,0,0.5); ｝ < div class = "架" > < div class = " content_sizer”> <svg width=10000 height=5000 /> < div class = "内容" > < / div > < / div > < / div >

请注意，我在SVG的width和height属性中使用了较大的值，因为它需要大于预期的最大大小，因为它只能缩小。这个例子使div的比例为10:5

新的纵横比标签会很棒，但它打乱了我的divs的定位。 填充包装器div的传统解决方案是有效的，但只能根据父类或视口的宽度调整大小，当高度是限制因素时，这就产生了问题。

我发现min()函数非常有用，并调整了传统的方法，如下所示:

身体{ background-image: linear-gradient(到右上，#FFE6B5， #B3CEBF); 填充:0; 保证金:0自动; overflow-y:隐藏;/*这是为了避免在视口高度小于纵横比要求*/时滚动 ｝ .wrapper { 位置:相对; 宽度:100大众; max-height: 100 vh; ｝ .sixteen-by-nine。宽高比{ 衬底:56.25% /* 9:16比*/ ｝ .content { 位置:绝对的; 上图:0;底部:0;左:0;右:0; 背景颜色:绿色 ｝ .centered { 位置:绝对的; 左:50%; 上图:50%; 转换:翻译(-50%，-50%); 高度:100%; 宽度:min(177.8vh, 100%);/*这总是在视口中保持16:9的比例*/ 字体大小:最小(1.7 3 vh,大众);/*如果你也对缩放字体大小*/感兴趣 背景颜色:蓝色 ｝ 身体< > < div class = "包装" > <div class=" 16x9纵横比"></div> <div class="content" > < div class = "集中" > <！——东西在这里——> < / div > < / div > < / div > 身体< / >