css - Angular Material 对话框内容中的响应式 Iframe

Question

我希望 Angular Material 对话框内容中的 iframe 是:

1. 最大尺寸为 560x315 像素
2. 响应大小取决于父对话框容器。如果容器小于最大宽度
3. 保持纵横比。

SourceComponent.ts:

openIFrameDialog(): void {
  this.dialog.open(IFrameDialogComponent);
}

IFrameDialogComponent.html:

<div mat-dialog-title class="close">
  <button mat-icon-button (click)="onClose()" tabindex="-1">
    <mat-icon>close</mat-icon>
  </button>
</div>
<mat-dialog-content>
    <iframe width="560" height="315" src="[yt_video_url]" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</mat-dialog-content>

我还在 IFrameDialogComponent.scss 中添加了这个:

mat-dialog-content iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

但不幸的是，它在整个屏幕上展开，而不是在父容器上展开

对于如何实现上述要求有什么建议吗？

非常感谢。

Answer 1

如何在你的 css(IFrameDialogComponent.scss)中使用最大宽度，如下所示:最大宽度:100%；
最大高度:100%；