在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());
      }
}

我遇到过这个问题很多次，所以我为它做了一个JS解决方案。这基本上是根据你指定的元素宽度比例来调整domElement的高度。你可以这样使用它:

<格比=“4x3”></div>

请注意，因为它正在设置元素的高度，元素应该是一个display:block或display:inline-block。

https://github.com/JeffreyArts/html-ratio-component

我已经找到了一种使用CSS来做到这一点的方法，但你必须小心，因为它可能会根据你自己网站的流程而变化。我这样做是为了在我的网站的流体宽度部分中嵌入具有恒定长宽比的视频。

假设你有一个这样的嵌入视频:

<object>
     <param ... /><param ... />...
     <embed src="..." ...</embed>
</object>

然后你可以把这些都放在一个带有“video”类的div中。这个视频类可能是你网站中的流动元素，它本身没有直接的高度限制，但当你调整浏览器的大小时，它会根据网站的流量改变宽度。这可能是你想要嵌入视频的元素，同时保持一定的视频宽高比。

为了做到这一点，我在“video”类div中的嵌入对象之前放了一张图像。

! !重要的部分是图像具有您希望保持的正确长宽比。此外，确保图像的大小至少与你期望的视频(或你正在维护的A.R.)根据你的布局得到的最小尺寸一样大。这将避免在调整百分比大小时图像分辨率中的任何潜在问题。例如，如果你想保持3:2的纵横比，不要只使用3px * 2px的图像。它在某些情况下可能会工作，但我还没有测试过，避免使用它可能是个好主意。

您可能已经为网站的流体元素定义了这样的最小宽度。如果没有，那么这样做是一个好主意，以避免在浏览器窗口变得太小时删除元素或出现重叠。在某些地方最好有一个滚动条。一个网页的最小宽度应该在600px左右(包括任何固定宽度的列)，因为屏幕分辨率不能再小了，除非你处理的是手机友好型网站。! !

我使用一个完全透明的png，但我真的不认为它最终是重要的，如果你做得对。是这样的:

<div class="video">
     <img class="maintainaspectratio" src="maintainaspectratio.png" />
     <object>
          <param ... /><param ... />...
          <embed src="..." ...</embed>
     </object>
</div>

现在你应该能够添加类似于下面的CSS:

div.video { ...; position: relative; }
div.video img.maintainaspectratio { width: 100%; }
div.video object { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; }
div.video embed {width: 100%; height: 100%; }

确保您还删除了对象和嵌入标记中任何显式的高度或宽度声明，这些标记通常带有复制/粘贴嵌入代码。

它的工作方式取决于视频类元素的位置属性和你想要的项目保持一定的纵横比。它利用了图像在元素中调整大小时保持适当长宽比的方法。它告诉视频类元素中的任何其他元素，通过强制其宽度/高度为图像所调整的视频类元素的100%来充分利用动态图像提供的空间。

很酷，是吧?

您可能需要稍微摆弄一下才能让它与您自己的设计一起工作，但这实际上对我来说工作得非常好。大概的概念是这样的。

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

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

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

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

CSS技巧文章

更多的信息

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

CSS对此有一个新的属性:aspect-ratio。

https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio

@supports(纵横比:1 / 1){ div { 纵横比:16 / 9; 背景颜色:橙色; ｝ ｝ <div style="width: 200px"></div> . <人力资源/ > <div style="width: 400px"></div> . <人力资源/ > <div style="height: 50px"></div> . <人力资源/ > <div style="height: 10px"></div> .

Chrome和Edge从V88开始完全支持它，Firefox从V81开始支持它(设置layout.css.aspect-ratio。在about:config中启用为true)。

兼容性信息请访问https://caniuse.com/mdn-css_properties_aspect-ratio