响应式iframe：缩放与裁剪

Question

主要问题是我的iframe有时不适合显示空间，具体取决于显示尺寸。我采用的一种方法是尝试将div包裹在iframe周围，以实现响应式渲染。这是HTML部分：

<div class="resif"><iframe style="border:0px;" src="link" width="700px" height="350px"></iframe></div>

然后我有以下样式规则：

.resif {
    position: relative;
    padding-bottom:55%;
    padding-top: 25px;
    height: 0;
}

.resif iframe {
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}

结果令我感到困扰。 iframe的缩放比例无法适应width:100%;规则所期望的容纳区域。 iframe显得太大，无法显示在屏幕上。然后，我开始尝试修改它，并尝试使用其他值（例如90％或80％）来查看会发生什么。当我尝试较小的百分比时，发生的事情是仅裁剪iframe；该百分比右边的所有内容都会被切除。

我也尝试直接在iframe的属性中设置width:100%，但还是没有运气

问题

为什么我上面尝试过的div wrap方法不起作用？缩放iframe以适应某个区域是否可行？目前看来，我最多只能裁剪其中的某些部分-不幸的是，这并不能解决任何问题。

对于它的价值，过去我在嵌入视频时成功使用了这种方法。视频iframe可以在不同的显示尺寸上进行响应渲染，但是iframe似乎有所不同，或者我的直觉存在缺陷，在这种情况下，我想了解如何解决以上代码。另外，如果这种方法似乎是失败的原因，请随时发布其他解决方案。

Answer 1

我认为您的问题是在 iframe 上使用此 width =“ 700px” height =“ 350px” 元素，试试这个：

.resif iframe {
  position: absolute;
  top:0;
  left:0;
  width:100% !important;
  height:auto !important;

}

或者这个：

.resif iframe {
  position: absolute;
  top:0;
  left:0;
  width:100% !important;
  height:100% !important;

}