0

这个 iframe 的宽度和高度不会改变。我想要响应式设计。请帮忙。

现在：

<iframe src="http://www.kadinvekadin.net/mod-burclar.php"
        frameborder="0"
        scrolling="no"
        width="300"
        height="300">

修改为 500x500 - 不工作，仍为 300x300：

<iframe src="http://www.kadinvekadin.net/mod-burclar.php"
        frameborder="0"
        scrolling="no"
        width="500"
        height="500">
4

1 回答 1

0

对于纯 CSS 解决方案，您需要将 iframe 包裹在容器周围并对其应用样式，有关更多详细信息，请参阅http://andmag.se/2011/11/responsive-embeds/

另一种选择是使用 jquery，请在https://gist.github.com/aarongustafson/1313517了解一下

试试这个代码，

 <html>
 <body>
 <style>
 html,body        {height:100%;}
 .wrapper         {width:80%;height:100%;margin:0 auto;background:#CCC}
 .iframe1        {position:relative;}
 .iframe1 .ratio {display:block;width:100%;height:auto;}
 .iframe1 iframe {position:absolute;top:0;left:0;width:100%; height:100%;}

 </style>
 <div class="wrapper">
 <div class="iframe1">

    <img class="ratio" src="sometransparentimage.jpg"/>
    <iframe src="http://www.kadinvekadin.net/mod-burclar.php" frameborder="0" 

      allowfullscreen></iframe>
  </div>

  </div>
  </body>
  </html>
于 2013-08-27T07:40:31.797 回答