javascript - iframe 在长宽比和响应能力方面的行为类似于图像元素

Question

有plenty solutions那里的宽度是响应式的，并且 iframe 保留纵横比，但我找不到也包含 iframe 高度的解决方案。

关于上述解决方案，如果 iframe 解决方案有一个高度可以改变的父 div，那么如果高度太小，这些解决方案只会切断 iframe 的底部，而不是响应。

我需要一个适用于 iframe 所在父元素的高度和宽度发生变化的情况的解决方案，以便跨不同设备和 View 端口大小使用。

该解决方案应允许 iframe 表现得像响应式图像元素，当宽度和高度的大小发生变化时，它会保留纵横比。

Answer 1

您可以通过在容器中使用 position:absolute; 来使 iframe 响应，但是您需要确保容器上有一个设定的高度。

.container {
  position: relative;
  height: 500px;
  width: 100%;
}

.container iframe {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}