Question

我有一个iframe，它位于div中，该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; */
    }
 }

只是不确定从这里要去哪里。谢谢

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/

让我知道是否有帮助，

如何在另一个div内使iframe响应？

1 个答案: