Question

此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">

Answer 1

对于纯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>

iframe的宽度和高度不会改变

1 个答案: