À l'échelle de l'iFrame css largeur de 100% comme l'image

Je tiens à l'échelle d'une iFrame par CSS pour width: 100%, et la hauteur de l'échelle proportionnellement à la largeur.

Avec un <img> balise cela fonctionne bien.

L'image et de l'iFrame ont défini la largeur et la hauteur dans le code html.

Voici quelques exemples:

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

Cela fonctionne très bien sur les images, mais je voudrais le même comportement pour les 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>

L'iFrame rend 100% de largeur, mais ne l'est pas, c'est la hauteur proportionnelle comme l'image n'.

  • Que fais-tu si loin? Pouvez-vous faire un jsfiddle? Permet de voir votre code.
InformationsquelleAutor Oliver | 2012-06-20