css - 如何保持iframe的纵横比

Question

我有一个带有以下 CSS 的 iframe:

.preview-iframe {
    width: 100%;
    height: 100%;
    border: 0;

    max-width: 1280px;
    max-height: 720px;
    margin: auto;
}

它位于具有以下 CSS 的容器中:

.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%;
}

包装器位于一个 div 中

position: fixed

我试图在窗口调整大小时为 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%;
}