我如何确保iFrame的宽高比是否有效？

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了我如何确保iFrame的宽高比是否有效？相关的知识，希望对你有一定的参考价值。

我有一个非常简单的问题。如何确保iframe的宽高比具有响应性？

iframe是YouTube视频，我希望无论浏览器窗口大小如何，iframe的宽高比都保持为16：9。

这是我目前的移动设备代码：

@media screen and (max-width: 600px) {
  iframe, body {
    max-width: 90vw;
    height: auto;
  }
}

iframe {
  border: 0;
  width: 600px;
  height: 338px;
}

由于YouTube iframe不会自动保持宽高比，我需要一种方法来保持视频的宽高比，宽度为90vw。这个当前代码的问题在于，它只调整宽度，留下不需要的信箱。

答案

你真的不需要媒体查询来实现这一目标，但如果你愿意，你可以将其转移到媒体查询中。那么，它是如何实现的？

因为，我们知道我们需要aspect ratio of 16:9，宽度不应超过90vw，因此高度也不应超过50.85vw。我们根据你的绝对尺寸限制设置max-height and max-width，容量是600px和338 px。现在，设置iframe dimensions to the 100% of the container，它继承了那个维度。 :)

.tv-wrapper {
  max-width:600px;
  max-height:338px;
  width:90vw;
  height:50.85vw;
  margin:0 auto;
}
iframe {
  width:100%;
  height:100%;
}
<div class="container">
      <div class="tv-wrapper">
          <iframe class="sproutvideo-player" src="//videos.sproutvideo.com/embed/489adcb51e1debcdc0/e0d9daac7a1a9b30?
bigPlayButton=false&amp;showControls=false" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
          </div>
    </div>
另一答案

将iframe包装在容器中。

.media-container {
    position: relative;
    padding-bottom: 56.25%; // = 16:9
}

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

以上是关于我如何确保iFrame的宽高比是否有效？的主要内容，如果未能解决你的问题，请参考以下文章

如何找到适合预定尺寸的宽高比 4:3 的尺寸？

在 UIImageView 中应用适合图像的宽高比后如何知道图像大小

强制QRubberBand具有特定的宽高比

在自定义UITableViewCell中保持UIImageView的宽高比

为啥 flexbox 中的宽高比 CSS 属性有时会被忽略？ [复制]

所有 Android 手机和平板电脑设备的宽高比是多少？