优雅的实现 iframe 高宽度自适应

iframe 是一项页面嵌套技术，可以将两个不同的网页、两个不同域的网站快速合并的一种技术手段。不过在使用这项技术时，通常会遇到大小不匹配的情况，使用布局视觉不友好。本站也使用到这项技术，不过在解决大小布局问题时，从互联网搜索到的方法，感觉不太雅化，不过最终还是找到了纯 css 的自适应大小的方法。

youwu.today 在编写文章《 fd, 替代 find 命令的工具》时碰到的这个 iframe 自适应问题。虽然 youwu.today 是使用 hugo 构建的静态站，hugo 来已经内置了嵌套 youtube 的视频，但没有西瓜视频、bilibili 视频的方法，不过可以按照 hugo 中实现 youtube 视频嵌套的方法依葫芦画瓢。

在介绍本站方法之前，先来说说可能的解决方法。

在互联网上，你可以非常轻易的就会找到使用 javascript 来动态调整 iframe 框的高度、宽度。不过你也可以找到使用纯 css 布局来解决问题的方法（可能跟 youwu.today 搜索时使用的关键词有关）。在简单的了解之后，youwu.today 决定使用 css 的方案。因为这样无须考虑把 javascript 的控制逻辑代码与其它的 javascript 代码组织的问题。

iframe 例子 #

<iframe height="400px"
    style="border: 2px black solid;"
    src="https://youwu.today" title="今日有悟">
</iframe>

搞不清楚 iframe 的默认大不是如果规定的，效果如上。为了控制篇幅，这里使用 400px 作为演示的高度。不设置宽度是为了跟下一个例子作对比。

如何使用 css 来控制 iframe 的高度、宽度 #

<div style="position: relative; width: 100%; 
    padding-top: calc(100% * 720 / 1280); 
    border: 2px black solid;">
    <iframe src="https://youwu.today" title="今日有悟" 
    style="position: absolute; width: 100%; height: 100%; top: 0;">
    </iframe>
</div>

使用一个 div 作为容器将 iframe 包裹起来，这个容器须设置这样的样式 position: relative; width: 100%; padding-top: calc(100% * 高度/宽度) ，iframe 样式设置为 position: absolute; width: 100%; height: 100%; top: 0;。注意，这个方法是通过一个外部容器来决定 iframe 的位置、高度、宽度，iframe 本身不设置大小，并设定其 top: 0，将 iframe 的上边框与外部容器的上边框重叠，这样就达到控制 iframe大小问题，而且会根据窗口大小自适应哦，不信尝试调整下当前浏览器的宽度，看看这个 iframe 例子会发生什么样的变化。

如果你的 iframe 是用来引用媒体视频的，那外部容器的 padding-top: 的值最好跟视频的高宽比保持一致，css 提供了可以动态计算的 calc 函数。

使用 javascript 来控制 iframe 高宽度的原理大概是这样的，使用 javascript 控制程序监听窗口大小变化事件，然后计算窗口视窗大小，再将具体值设置到 iframe 上。从而实现自适应，效果上是一样的。但使用纯 css 的方法来说，是不是更直接呢？

有可能互联网上大量的基于 javascript 方法的文章是比较旧的，因为 ie 一直做为反动派，老是要跟标准不一样。不过大家可以放心，听说 ie 将在 2022年就被老东家微软全线放弃了。可以大胆使用 html5/css3。

这里额外收获了一个知识点，使用 position: relative; width: 100%; padding-top: calc(100% * 高度/宽度);可以用来构建一个高宽比例受控制的占位框。