定义 iframe 大小，然后让它自动调整为浏览器宽度答案

【问题标题】：Define a iframe size then have it auto resize to browser width定义 iframe 大小，然后让它自动调整为浏览器宽度
【发布时间】：2020-01-31 03:48:48
【问题描述】：

我嵌入了一个定义大小为 {500x320} 的 iframe（仅出于比例考虑），然后我希望父容器将整个 iframe 的大小自动调整为浏览器宽度。

但是因为我已经定义了宽度和高度，所以 iframe 并没有真正调整大小或响应父容器。我还附上了 iframe 未调整到浏览器宽度的屏幕截图。

我做错了什么？

HTML：

<div class="container">
    <div class="iframe"> </div>
</div>

我的 CSS：

    .container {
    width:80%;
    height:auto;
}

    .iframe {
    width:500px;
    height:320px;
}

【问题讨论】：

你说的是iframe，但示例代码中只有div？
我是 CSS 新手，所以请原谅我糟糕的编码技巧。当前的问题是，当浏览器宽度发生变化时，iframe 不会放大/缩小。重点是剪辑 iframe 500x320px，然后允许它根据浏览器宽度调整大小。
如果你知道所有需要的代码，你可能不会问。但我想知道的是，你在内部 div 中有 iframe 元素吗？此外，图像显示了一个居中的框，应用程序的答案是否也应该使框居中？如果是这样，也许您也已经有一些 CCS，如果您也可以将该 CSS 添加到问题中，那就太好了。
我认为这两个问题都是肯定的。我也觉得如果你自己去看看会更好。这是链接：cutit.org/7OXsX
嗯 .. 我们是来帮助你的，我们不会做你的工作。您知道您的代码库，您的任务是向我们提供所需的信息。

标签： html css iframe stylesheet

【解决方案1】：

您需要将 css 直接添加到 iframe 中。检查一下。

    .container {
    width:80%;
    height:auto;
}

    .iframe {
    width:500px;
    height:320px;
}

.iframe iframe{width:100%; height:100%;}

<div class="container">
    <div class="iframe">
      <iframe width="560" height="315" src="https://www.youtube.com/embed/C0DPdy98e4c" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div>
</div>

【讨论】：

感谢代码，但问题没有解决。当浏览器宽度发生变化时，iframe 不会放大/缩小。重点是剪辑 iframe 500x320px，然后允许它根据浏览器宽度调整大小。

【解决方案2】：

你只需要设置 width: 100%;和高度：100%；

 .container {
    width:80%;
    height:auto;
}

    .iframe {
    width:500px;
    height:320px;
}
.iframe iframe{
    width: 100%;
    height: 100%;
    }

<div class="container">
    <div class="iframe"> 
    <iframe src="https://api.jquery.com/focus/">
    
    </iframe>
    </div>
</div>

【讨论】：

感谢代码，但问题没有解决。当浏览器宽度发生变化时，iframe 不会放大/缩小。重点是剪辑 iframe 500x320px，然后允许它根据浏览器宽度调整大小。

【解决方案3】：

我找到了解决问题的方法。也许我没有正确地问我的问题。任务是保持框架的纵横比，同时允许调整到浏览器宽度。

HTML

<div class="video-container">
    <iframe src="http://www.youtube.com/embed/4aQwT3n2c1Q" height="315" width="560" allowfullscreen="" frameborder="0">
    </iframe>
</div>

CSS：

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 35px;
    height: 0;
    overflow: hidden;
}


    .video-container iframe {
        position: absolute;
        top:0;
        left: 0;
        width: 100%;
        height: 100%;
    }

看笔 Responsive iframe with an Aspect Ratio 在 CodePen 上

我从this website找到了解决方案

【讨论】：