您可以通过使用SVG来实现这一点。

这要视情况而定，但在某些情况下它真的很有用。举个例子，你可以设置background-image而不设置固定的高度，或者用它来嵌入youtube <iframe>，比例为16:9，位置:绝对等。

对于3:2的比例设置viewBox="0 0 3 2"等等。

例子:

div { 背景颜色:红色 ｝ svg { 宽度:100%; 显示:块; 可见性:隐藏 ｝ .demo-1{宽度:35%} .demo-2{宽度:20%} < div class = " demo-1”> <svg viewBox="0 0 3 2"></svg> . < / div > <人力资源> < div class = " demo-2”> <svg viewBox="0 0 3 2"></svg> . < / div >

如果你想在纵向视图或横向视图的视口中放置一个正方形(尽可能大，但没有任何东西粘在外面)，在纵向/横向方向上切换使用vw/vh:

@media (orientation:portrait ) {
  .square {
    width :100vw;
    height:100vw;
  }
} 
@media (orientation:landscape) {
  .square {
    width :100vh;
    height:100vh;
  }
} 

假设你有2个div，外部的div是一个容器，内部的div可以是你需要保持其比例的任何元素(img或YouTube iframe或其他)

HTML看起来是这样的:

<div class='container'>
  <div class='element'>
  </div><!-- end of element -->
<div><!-- end of container -->

比如说你需要保持元素的比例 比例=> 4比1或2比1…

CSS是这样的

.container{
  position: relative;
  height: 0
  padding-bottom : 75% /* for 4 to 3 ratio */ 25% /* for 4 to 1 ratio ..*/
  
}

.element{
  width : 100%;
  height: 100%;
  position: absolute; 
  top : 0 ;
  bottom : 0 ;
  background : red; /* just for illustration */
}

当在%中指定填充时，它是基于宽度而不是高度计算的。 ．． 所以基本上，不管你的宽是多少，高总是以此为基础计算出来的。这样就能保持比例不变。

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

这里是我的解决方案，以保持16:9纵横比在纵向或横向的div与可选的固定边距。

它是宽度/高度和最大宽度/最大高度属性与vw单位的组合。

在这个示例中，悬停时添加了50px的上下边距。

html { 高度:100%; ｝ 身体{ 保证金:0; 高度:100%; ｝ .container { 显示:flex; justify-content:中心; 对齐项目:中心; 高度:100%; ｝ .fixedRatio { max-width: 100大众; Max-height: calc(9 / 16 * 100vw); 宽度:calc(16 / 9 * 100vh); 身高:100 vh; /*调试*/ 显示:flex; justify-content:中心; 对齐项目:中心; 背景颜色:蓝色; 字体大小:2快速眼动; 字体类型:“天线”; 颜色:白色; 过渡:宽度0.5s进出，高度0.5s进出; ｝ .fixedRatio:{徘徊 宽度:calc(16 / 9 * (100vh - 100px)); 高度:calc(100vh - 100px); ｝ < div class =“容器”> < div class = ' fixedRatio ' > 16:9 < / div > < / div >

在JSFiddle上演示

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

我试图将它们组合在一起，以带来一个完全可移植和可调整大小的解决方案……诀窍是使用自动缩放图像，但使用内联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