如何使 iframe 在另一个 div 中响应？答案

【问题标题】：How can I make an iframe responsive inside another div?如何使 iframe 在另一个 div 中响应？
【发布时间】：2019-02-08 23:33:36
【问题描述】：

我有一个 iframe，它位于页面左对齐的 div 中（仅在大屏幕上，然后它下降到下方并且应该与屏幕一样宽）。我希望 iframe 在屏幕较小时缩小以按比例缩小。目前，它只是切断框架。

这就是我所拥有的

我的html：

<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; */
    }
 }

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

【问题讨论】：

标签： html css iframe responsive-design

【解决方案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/

如果有帮助，请告诉我，

【讨论】：