写上一篇文章时遇到了一个问题，我想插入一个 bilibili 的 iframe 来嵌入视频，如果直接用 B 站给的 iframe 代码，出来的是很小的一块，强行把 iframe 的 width 变成 100% 后，宽度是自适应撑开了，高度还是只有一点点高，然后 height 怎么写都不太对，如果再考虑手机等小屏幕设备需要自适应宽度，这个更无解了。搜了一圈，找到了一篇文章【前端笔记】使用iframe嵌入等比缩放的哔哩哔哩视频，按这个做法解决了问题
仔细看了下实现，其实挺有意思的，应该可以算前端的一个经典问题，就是如何设定一个 HTML 元素，能做到自适应宽度，且高宽比固定
一般我们需要维持高宽比的是图片，这个在 <img> 标签上可以有各种缩放选项能满足需求。对于视频，或者 iframe 嵌入，则没有比较好的原生实现方式。在上面找到的那个文章里，其实是先构建一个能自适应宽度且高宽比固定的 HTML 容器（一个 position: relative 的 <div>），然后把真正要做到自适应的元素放到这个容器里，并用绝对定位占满空间，那么问题从怎么设定这个元素属性变成怎么得到可以自适应宽度且高宽比固定的一个容器
按搜到的那个实现做，是用一个空 <div>，先设定宽度 width: 100% 可以做到自适应宽度，接着为了维持高宽比，先强行设定高度 height: 0，然后用 padding-bottom: 75% 来做到等比撑开。这里的百分比计算是按照宽度来计算的，详细的定义可以看 w3.org 里关于 box 元素 padding-properties 的定义 http://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#padding-properties。搜索结果里也都有这么来介绍，比如这两例：
今天问公司的前端担当 @tdzl2003，给出了另一个思路清奇的操作，直接塞一个比例图片进去，然后把这个图片撑开就行了，图片可以用透明色，而且 base64 编码后的图并没有多大，不会影响视觉效果也不影响性能，比如要 4:3 就弄一个 4 像素宽 3 像素高的空白图
果然前端都是各种骚操作，各种给跪