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/を参照してください。

もう 1 つのオプションは、jquery を使用することです。

このコードを試して、

 <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 に答える