我想只是使用rem或em应该解决固定比例的问题，但不会像vw或vh那样难以绑定到屏幕上，或者像%那样痛苦地使用flexbox。好吧，没有一个答案适合我，在我的情况下，这对我来说很重要:

<div class="container">
   <div>
   </div>
</div>

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

或者用rem，但是不管怎样，它们中的任何一个都可以。 Rem使用默认的字体大小值，而em使用最接近的字体大小。

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

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

Chrome 88的新特性是CSS的宽宽比属性，其他浏览器也很快会加入。

纵横比CSS属性为盒子设置了一个优先的纵横比，它将用于自动大小的计算和一些其他的布局功能。

CSS技巧文章

更多的信息

div { 背景:rebeccapurple; 身高:100 px; 保证金:1 em汽车; ｝ .square { 纵横比:1 / 1; ｝ < div class = "广场”> < / div >

我们是这样解决的:

.square {
  width: 100%;
  max-height: 100%;
  aspect-ratio: 1;
  background: red;
  position: relative;
  margin: auto;
  top: 50%;
  transform: translateY(-50%);
}

参见https://jsfiddle.net/r1jL3oqa/1/

在Angular中，我添加了一个处理纵横比的指令。

import { AfterViewInit, Directive, ElementRef, Input, Renderer2 } from 
"@angular/core";
import { debounceTime, fromEvent, Subject, takeUntil } from "rxjs";
 
// Auto sets the height of element based on width. Also supports window resize
@Directive({
    selector: '[aspectRatio]'
})
export class AspectRatioDirective implements AfterViewInit {
    @Input() aspectRatio?: number; // example 9/16

    private readonly onDestroy$ = new Subject<void>();

    constructor(private element: ElementRef, private renderer: Renderer2) {}

    public ngAfterViewInit(): void {
        this.setDimensions();
        this.initResizeListeners();
    }

    public ngOnDestroy(): void {
        this.onDestroy$.next();
        this.onDestroy$.complete();
      }

    private setDimensions(): void {
        if (!this.aspectRatio) { return; }
        const width = this.element.nativeElement.clientWidth;
        this.renderer.setStyle(this.element.nativeElement, 'height', `${width * this.aspectRatio}px`);
    }

    private initResizeListeners(): void {
        fromEvent(window, 'resize')
          .pipe(debounceTime(100), takeUntil(this.onDestroy$))
          .subscribe(() => this.setDimensions());
      }
}

假设你有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 */
}

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