学习为嵌入式iframe保留长宽比

2021年更新。这是我一段时间以来阅读量最大的文章之一。现在我很高兴地宣布：它已经过时了。在CSS中有一个属性

你所需要的一切。

iframe {
  aspect-ratio: 16 / 9;
}

如果你想在你的网页上使用托管在其他服务器上的视频（YouTube、Vimeo等），你很可能会使用它们的嵌入可能性，而不是HTML5的标签或托管在你服务器上的Flash插件。这些嵌入代码大多使用，这很好，因为他们在他们的网站上检测你的所有需求，如 "你需要什么格式"，"使用HTML5或Flash"，或 "流媒体高清或手机低清晰度"。很多决定都是由你来做的!

然而，你将不得不指定iframe的大小。而且，如果你的响应式布局根据视口宽度灵活地缩放你的内容，而不是在断点上固定宽度（像这个页面），嵌入的iframe在小屏幕上可能看起来特别糟糕。这里有一个保持长宽比的解决方案。

我将使用我们项目中的一个预告片视频。视频中的女孩是Tina，我们的一个开发人员。我从vimeo得到的标准嵌入代码看起来是这样的。

<iframe src="http://player.vimeo.com/video/64197060"
  width="550" height="281" frameborder="0">
<iframe>

好吧，实现根据视口/内容宽度调整大小的最便宜的方法是为你的iframe添加一些CSS。

iframe {
  width: 100%;
}

而iframe的宽度和你把他放在的容器一样。然而，高度就不能那么容易控制了。为了保持这个长宽比，你需要一个封装的div，我们叫它.aspect-ratio。

.aspect-ratio {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 51%;
}

这个div和内容/视口区域一样宽，高度为零。所以实际上这不应该是可见的。然而。这个的padding是视频的高度除以宽度，或者换句话说：长宽比的百分比无论你如何调整你的窗口大小，它将始终保持在这个比例。所以，你现在需要的是让里面的iframe流向其父元素的每个角落。

.aspect-ratio iframe {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0; top: 0;
}

由于父元素没有高度，我们把它绝对放在左上角，让iframe使用填充物创造的空间。

然后就可以了。