Skalieren Sie die CSS-Breite von iFrame zu 100% wie ein Bild

Question

Jun 20, 2012, 04:52 PM

Skalieren Sie die CSS-Breite von iFrame zu 100% wie ein Bild

Ich möchte einen iFrame über CSS skalierenwidth: 100%und die Höhe sollte proportional zur Breite skaliert werden.

Mit einem<img> Tag, das funktioniert gut.

Sowohl das Bild als auch der iFrame haben im HTML-Code eine definierte Breite und Höhe.

Hier einige Beispiele:

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

Dies funktioniert gut bei Bildern, aber ich möchte dasselbe Verhalten für 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>

Der iFrame wird zu 100% breit gerendert, skaliert jedoch nicht wie das Bild in der Höhe proportional.