假设您想将 CSS-Tricks 网站放入一个 <iframe> 中。 您将这样操作
<iframe src="https://css-tricks.cn"></iframe>如果没有其他样式，您将获得一个 300×150 像素大小的矩形。 这甚至不在用户代理样式表中，这只是 iframe（和对象）的一些神奇之处。 这几乎肯定不是您想要的，因此您经常会在 iframe 本身看到宽度和高度属性（YouTube 就是这样做的）。
<iframe
width="560"
height="315"
src="https://css-tricks.cn"></iframe>这些属性很好。 这是一个开始，可以为 iframe 保留一些空间，这更接近于最终的样子。 请记住，布局抖动很糟糕。 但是我们还有更多工作要做，因为这些是固定数字，而不是响应式友好设置。
目前，响应式 iframe 最好的技巧是创建一个 纵横比框。 首先，您需要一个具有相对定位的父元素。 iframe 是其中的子元素，您需要对其应用绝对定位以填充该区域。 棘手的部分是父元素通过创建伪元素来推动它到该高度，从而根据纵横比确定完美的高度。 其主要目的是，将元素推到正确的大小比强制特定高度更好的系统。 在内容内部比纵横比所占比例更高的场景中，它仍然可以增长而不是溢出。
我将直接在这里放置一个完整的演示（也适用于图像）
查看 Chris Coyier 的 CodePen 上的
响应式 iframe (@chriscoyier)
在 CodePen 上。
每当我们处理纵横比时，我都会想到将来会更好地处理它。 有一个 实验性的 intrinsicsize 属性，我可以想象它除了图像之外，对于 iframe 来说也很不错。 此外，还有希望很快就会存在的 CSS 中的 aspect-ratio 和 通过几乎不做任何事来获得纵横比大小的图像的想法，我希望它可以扩展到 iframe。
旧的填充顶部方法怎么样？ https://benmarshall.me/responsive-iframes/
这正是它，只是更宽容，更容易自定义。
等等……Ben Marshall 的网站是不是 CSS Tricks 的复制版，只是颜色不同？
谢谢您，
有用的提示，但我可以将 width=”560″ 替换为 width=”100%” 吗？
当然可以。 这样一来，宽度会与容器匹配，但它不会按任何特定纵横比进行缩放。
试试看！ 对我来说它起作用了。
请记住，iframe 在浏览器中具有 150 像素的最小高度，除非您明确指定较小的高度。 这就是为什么我使用高度而不是填充来创建响应式 iframe（广告）的原因。
我仍然使用 Fitvids。 我喜欢我可以添加它，并且再也不用考虑它。 而且客户也不必了解任何 CSS。 我知道它需要加载更多东西，而且这是一种比较旧的方法，但它非常简单，不需要任何麻烦。
非常棒的解决方案，解决了恼人的问题。
谢谢您。
我尝试了上面的方法，虽然它起作用了，但它破坏了其他东西。 因此，我尝试了以下方法，它对我来说效果很好。 我使用的是 Zurb Foundation 6。
iframe
{
@media screen and (max-width: 39.9375em)
{
width: 100%;
height: 100%;
}
}