Comment mettre à l'échelle le contenu d'un iframe ?

Question

Comment puis-je mettre à l'échelle le contenu d'une iframe (dans mon exemple, il s'agit d'une page HTML, et non d'une fenêtre popup) dans une page de mon site web ?

Par exemple, je veux afficher le contenu qui apparaît dans la iframe à 80 % de la taille originale.

Answer 1

La solution de Kip devrait fonctionner sur Opera et Safari si vous changez la CSS en :

<style>
    #wrap { width: 600px; height: 390px; padding: 0; overflow: hidden; }
    #frame { width: 800px; height: 520px; border: 1px solid black; }
    #frame {
        -ms-zoom: 0.75;
        -moz-transform: scale(0.75);
        -moz-transform-origin: 0 0;
        -o-transform: scale(0.75);
        -o-transform-origin: 0 0;
        -webkit-transform: scale(0.75);
        -webkit-transform-origin: 0 0;
    }
</style>

Vous pouvez également spécifier overflow : hidden sur #frame pour éviter les barres de défilement.

Answer 2

J'ai trouvé une solution qui fonctionne dans IE et Firefox (au moins sur les versions actuelles). Dans Safari/Chrome, l'iframe est redimensionné à 75% de sa taille d'origine, mais le contenu de l'iframe n'est pas redimensionné du tout. Dans Opera, cela ne semble pas fonctionner. Tout ceci semble un peu ésotérique, donc s'il existe une meilleure façon de procéder, je serais heureux de recevoir des suggestions.

<style>
#wrap { width: 600px; height: 390px; padding: 0; overflow: hidden; }
#frame { width: 800px; height: 520px; border: 1px solid black; }
#frame { zoom: 0.75; -moz-transform: scale(0.75); -moz-transform-origin: 0 0; }
</style>

...

<p>Some text before the frame</p>
<div id="wrap">
<iframe id="frame" src="test2.html"></iframe>
</div>
<p>Some text after the frame</p>
</body>

Note : J'ai dû utiliser le wrap pour Firefox. Pour une raison quelconque, dans Firefox, lorsque vous réduisez l'objet de 75%, il utilise toujours la taille originale de l'image pour des raisons de mise en page. (Essayez de supprimer le div de l'exemple de code ci-dessus et vous verrez ce que je veux dire).

J'ai trouvé une partie de ceci dans cette question .

Answer 3

Après avoir passé des heures à essayer de le faire fonctionner dans IE8, 9 et 10, voici ce qui a fonctionné pour moi.

Ce CSS dépouillé fonctionne dans FF 26, Chrome 32, Opera 18, et IE9 -11 à partir du 1/7/2014 :

.wrap
{
    width: 320px;
    height: 192px;
    padding: 0;
    overflow: hidden;
}

.frame
{
    width: 1280px;
    height: 786px;
    border: 0;

    -ms-transform: scale(0.25);
    -moz-transform: scale(0.25);
    -o-transform: scale(0.25);
    -webkit-transform: scale(0.25);
    transform: scale(0.25);

    -ms-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
}

Pour IE8, définissez la largeur/hauteur pour qu'elle corresponde à celle de la iframe, et ajoutez -ms-zoom à la div. conteneur .wrap :

.wrap
{
    width: 1280px; /* same size as frame */
    height: 768px;
    -ms-zoom: 0.25; /* for IE 8 ONLY */
}

Il suffit d'utiliser votre méthode préférée de reniflage du navigateur pour inclure de manière conditionnelle le CSS approprié, voir Existe-t-il un moyen de réaliser un CSS conditionnel spécifique au navigateur dans un fichier *.css ? pour avoir quelques idées.

IE7 était une cause perdue puisque -ms-zoom n'existait pas avant IE8.

Voici le HTML que j'ai testé :

<div class="wrap">
   <iframe class="frame" src="http://time.is"></iframe>
</div>
<div class="wrap">
    <iframe class="frame" src="http://apple.com"></iframe>
</div>

http://jsfiddle.net/esassaman/PnWFY/

Answer 4

Il n'est pas nécessaire d'entourer l'iframe d'une balise supplémentaire. Veillez simplement à augmenter la largeur et la hauteur de l'iframe de la même manière que vous réduisez l'iframe.

Par exemple, pour réduire le contenu de l'iframe à 80 % :

#frame { /* Example size! */
    height: 400px; /* original height */
    width: 100%; /* original width */
}
#frame {
    height: 500px; /* new height (400 * (1/0.8) ) */
    width: 125%; /* new width (100 * (1/0.8) )*/

    transform: scale(0.8); 
    transform-origin: 0 0;
}

En fait, pour obtenir une iframe de même taille, vous devez mettre les dimensions à l'échelle.

Answer 5

Suivi de La réponse de lxs : J'ai remarqué un problème où le fait d'avoir les deux zoom y --webkit-transform semble en même temps perturber Chrome (version 15.0.874.15) en produisant un effet de double zoom. J'ai pu contourner le problème en remplaçant zoom con -ms-zoom (ciblé uniquement sur IE), laissant Chrome utiliser uniquement la fonction --webkit-transform et cela a permis de clarifier les choses.