小编Oli*_*ver的帖子

我想通过CSS缩放iFrame width: 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%宽,但不像图像那样按比例缩放高度.