如何保持iframe的宽高比

Question

我有一个带有以下css的iframe：

.wrapper {
   position: absolute;
   width: calc(100% - 440px);
   height: 0;
   left: 0;
   top: 0;
   bottom: 0;
   text-align: center;
   background: #1c1c1c;
   display: flex;
   padding-bottom: 56.25%;
}

它位于具有以下CSS的容器内：

position: fixed

包装器位于带有

的div中

[Lcom.example.c4u015.retrotestapp.Questions;@97ddd71

我正在尝试在窗口调整大小时为iframe保持16：9的宽高比，但上述方法无法正常工作。我该怎么办？

Answer 1

<div class="wrapper">
  <iframe class="preview-iframe"> ... </iframe>
</div>

.wrapper {
  position: relative;
  height: 0;
  padding-bottom: 56.25%;
}
.preview-iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
}