Comment puis-je l'échelle le contenu d'une iframe?

De Kip solution doit travailler sur Opera et Safari si vous modifiez le fichier CSS pour:

<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 le #cadre pour éviter les barres de défilement.

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

Ce stripped-down CSS à l'œuvre dans FF 26, Chrome 32, Opéra de 18 ans, et IE9 -11 que de 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 correspondre à l'iframe, et ajoutez -ms-zoom .envelopper div conteneur:

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

Suffit d'utiliser votre méthode préférée pour la détection de browser conditionnelle, d'inclure les CSS, voir Est-il un moyen de faire de navigateur conditionnelle CSS à l'intérieur d'un *.fichier css? pour quelques idées.

IE7 était une cause perdue depuis -ms-zoom n'existait pas jusqu'à IE8.

Voici le HTML j'ai testé avec:

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

Vous n'avez pas besoin d'envelopper l'iframe avec un autre tag. Assurez-vous simplement d'augmenter la largeur et la hauteur de l'iframe par le même montant que vous réduisez la taille de l'iframe.

par exemple, à l'échelle 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;
}

Fondamentalement, pour obtenir la même taille de l'iframe, vous devez adapter les dimensions.

Je viens de tester et pour moi, aucune des autres solutions n'a fonctionné.
J'ai simplement essayé et cela a fonctionné parfaitement sur Firefox et Chrome, comme je l'avais prévu:

<div class='wrap'>
    <iframe ...></iframe>
</div>

et le css:

.wrap {
    width: 640px;
    height: 480px;
    overflow: hidden;
}

iframe {
    width: 76.92% !important;
    height: 76.92% !important;
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
}

Ce balances tout le contenu de 30%. La largeur/hauteur des pourcentages de cours doivent être adaptés en conséquence (1/scale_factor).

Si vous voulez l'iframe et son contenu à l'échelle lorsque la fenêtre est redimensionnée, vous pouvez définir les options suivantes pour la fenêtre de redimensionnement de l'événement ainsi que les iframes événement onload.

function()
{
    var _wrapWidth=$('#wrap').width();
    var _frameWidth=$($('#frame')[0].contentDocument).width();

    if(!this.contentLoaded)
      this.initialWidth=_frameWidth;
    this.contentLoaded=true;
    var frame=$('#frame')[0];

    var percent=_wrapWidth/this.initialWidth;

    frame.style.width=100.0/percent+"%";
    frame.style.height=100.0/percent+"%";

    frame.style.zoom=percent;
    frame.style.webkitTransform='scale('+percent+')';
    frame.style.webkitTransformOrigin='top left';
    frame.style.MozTransform='scale('+percent+')';
    frame.style.MozTransformOrigin='top left';
    frame.style.oTransform='scale('+percent+')';
    frame.style.oTransformOrigin='top left';
  };

Cela fera l'iframe et de son contenu à l'échelle 100% de la largeur de l'écharpe div (ou quelle que soit, en pourcentage, que vous voulez). Comme un bonus supplémentaire, vous n'avez pas à mettre le css de l'image pour codés en dur valeurs, car ils vont tous être défini de façon dynamique, vous aurez juste besoin de vous soucier de comment vous voulez que le wrap div à afficher.

Je l'ai testé et ça marche sur chrome, IE11, firefox et internet explorer.

Pour ceux d'entre vous de la difficulté à obtenir que cela fonctionne sous IE, il est utile d'utiliser -ms-zoom comme suggéré ci-dessous et utilisez la fonction de zoom sur la #wrap div, pas la iframe id. Dans mon expérience, avec la zoom fonction essayant à l'échelle de l'iframe div de #frame, il serait échelle de la taille de l'iframe et non pas le contenu à l'intérieur (qui est ce que vous allez pour).

Ressemble à ceci. Fonctionne pour moi sur IE8, Chrome et FF.

#wrap {
  overflow: hidden;
  position: relative;
  width:800px;
  height:850px;
  -ms-zoom: 0.75;
}

La #écharpe #cadre de la solution fonctionne très bien, aussi longtemps que les numéros #wrap est #frame fois le facteur d'échelle. Il montre que la partie de l'échelle réduite du cadre. Vous pouvez le voir ici mise à l'échelle vers le bas des sites web et de le mettre dans un pinterest comme la forme (avec la woodmark plugin jQuery):

http://www.genautica.com/sandbox/woodmark-index.html

Si votre code html est de style avec css, vous pouvez probablement lier des feuilles de style différentes pour différentes tailles.

Comme dit, je doute que vous pouvez faire.

Peut-être que vous pouvez mettre à l'échelle au moins le texte lui-même, en définissant un style font-size: 80%;.

Pas testé, pas sûr qu'il fonctionne, et de ne pas redimensionner des boîtes ou des images.