Scale iFrame css width 100％like a image

我想通过CSS缩放iFrame到宽度：100％，高度应按比例缩放到宽度。

使用< img>标签这个工作正常。

图像和iFrame都在HTML中定义了宽度和高度。

这里有一些例子：

<html>
    <style>
        #a{ width: 500px; }
        img{ width: 100%; height: auto }
    </style>
    <body>
        <div id="a">
            <img src="http://lorempixel.com/200/150/" width="200" height="150" />
        </div>
    </body>

这在图像上很好，但我想对iFrames相同的行为：

<html>
    <style>
        #a{ width: 900px; background: grey;}
        iframe{ width: 100%; height: auto }
    </style>
    <body>
        <div id="a">
            <iframe width="560" height="315" src="http://www.youtube.com/embed/RksyMaJiD8Y" frameborder="0" allowfullscreen></iframe>
        </div>
    </body>

iFrame呈现100％宽，但不像图像那样缩放它的高度成比例。

解决方法

图像和iframe之间的巨大差异是图像保持其纵横比的事实。您可以将图片和iframe组合使用，从而生成响应式iframe。
希望这回答你的问题。

检查此链接，例如：http://jsfiddle.net/Masau/7WRHM/

HTML：

<div class="wrapper">
    <div class="h_iframe">
        <!-- a transparent image is preferable -->
        <img class="ratio" src="http://placehold.it/16x9"/>
        <iframe src="http://www.youtube.com/embed/WsFWhL4Y84Y" frameborder="0" allowfullscreen></iframe>
    </div>
    <p>Please scale the "result" window to notice the effect.</p>
</div>

CSS：

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

注意：这只适用于固定的宽高比。

Scale iFrame css width 100％like a image

解决方法

相关文章