用于响应式屏幕分辨率和平板电脑纵向模式的 iframe 全屏

Question

我编写了一些代码来管理响应式全屏 iframe。它几乎工作得很好:)。问题是当屏幕分辨率为 1680x1050（请参阅picture）时。所以，在这种情况下，我想将 iframe 移动到屏幕中心，上下移动相同的黑色背景。添加，使用相同的 css，当 iframe 在平板电脑上的纵向模式全屏时，我想这样做。

.FullScreen {
  &-target {
    position: fixed !important;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 20000;
    width: 100vw;
    height: 100vh;
    background: #0a0a0a;
  }

  &-button {
    cursor: pointer;
    font-size: 40px;

    &--active {
/*....
....*/
      }
    }
  }
}

<div class="mne-contentBorder js-fullscreen-target FullScreen-target">
      <div class="myEMLObj">
      <div class="EMLObj-wrapper">
          <img class="EMLObj-placeholder" src="data:image/gif;">
          <iframe class="myObject-Iframe js-Iframe" src="" name="Iframe" frameborder="0"></iframe>
      </div>
  </div>
</div>

Don't care about white rectangle in the ifame, just focus in the black background caused by screen resolution

For tablet

Answer 1

尝试为 iframe 添加 css

iframe{
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
}