如何在另一个 div 中使 iframe 响应?

Question

我有一个 iframe，它在页面中左对齐的div 内(仅在大屏幕上，然后它下降到下方，应该与屏幕一样宽(。我希望当屏幕变小时，iframe 缩小到可缩放。目前，它只是切断框架。

这是我所拥有的

我的网页：

<div id="top_right">
<iframe id="forecast_embed" type="text/html" height="250" width="100%" frameborder="0" [src]='mylink'> </iframe>
</div>   

我的css：

@media only screen and (max-width: 1000px) {
iframe {
display:block;
width:100%;
}
#top_right_div {
width: 100%;
display: inline-block;
/* height: 260px; */
}
} 
@media only screen and (min-width: 1000px) {
iframe {
display:block;
width:100%;
}
#top_right_div {
width: 40%;
display: inline-block;
/* height: 260px; */
}
}

只是不知道从这里去哪里。谢谢

Answer 1

我们曾经做过一个技巧，我为响应式嵌入视频工作，我寻找它，我找到了它，它如下所示。

你会有一个容器和你的iframe。喜欢这个：

<div class="resp-container">
<iframe class="resp-iframe" src="https://www.youtube.com/embed/dQw4w9WgXcQ" gesture="media"  allow="encrypted-media" allowfullscreen></iframe>
</div>

然后像这样设置它们的样式：

.resp-container {
position: relative;
overflow: hidden;
padding-top: 56.25%;
}
.resp-iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}

这是我创建的用于检查它的代码笔 https://codepen.io/julia-cipriani-corvalan/pen/Eemery

来源：https://blog.theodo.fr/2018/01/responsive-iframes-css-trick/

让我知道是否有帮助，