60 votes

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

Je tiens à l'échelle d'une iFrame par CSS à l' 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'.

115voto

Rik Points 711

Grande différence entre une image et un iframe est le fait que l'image conserve c'est le rapport d'aspect. Vous pouvez combiner une image et d'un iframe avec entraînera un réactif iframe. Espérons que ce answerers votre question.

Suivez ce lien pour exemple : 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%;}

note: Ceci ne fonctionne qu'avec un fixe, le rapport d'aspect.

65voto

Simone Lazzari Points 163

@Rik, je suppose que c'est plus propre approche. Il fonctionne avec inline "hauteur" et "largeur" propriétés " (j'ai mis en valeur aléatoire dans le violon pour prouver qu') et avec CSS 'max-width' de la propriété (@Walf do you read me?).

padding-top approach

http://jsfiddle.net/7WRHM/1001/

Espérons que l'aide, Enjoy :)

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X