Existe-t-il un moyen de réduire ce qu'il y a dans une iframe sans ajuster css?possible de réduire le contenu de l'iframe?
un paramètre magique 'zoom' là-bas? !!!
J'ai un iframe 600px aperçu que je veux adapter un site 1000px dans ... sans scrollbars
Je crains que non. Votre seule option serait d'utiliser des modificateurs CSS spécifiques au site pour réduire la taille des polices et des éléments.
Eh bien, en bref non.
Vous pouvez utiliser pour définir la largeur/hauteur 600px puis définissez également CSS en ligne le overflow:hidden
Ah vrai - mon hypothèse était que l'affiche voulait que le site WHOLE visible. – Seidr
Eh bien, j'ai supposé la même chose vraiment.Heureusement, il ne veut pas rétrécir le site pour l'adapter à l'aperçu plus petit. Que vous ne pouvez pas faire ... moins vous faites un peu de rendu côté serveur d'une page, en sauvant la sortie, rétrécissant etc etc – thecoshman
bien, vous pouvez réduire le site pour s'adapter à l'iframe, clientide, cfr. ma réponse ci-dessous :) – futtta
Si vous contrôlez le Iframe contenu, vous trouverez peut-être ce petit hack de mes utiles: http://futtta.be/squeezeFrame/
Il s'agit d'une machine javascript stand-alone pour navigateur qui essaie d'ajuster automatiquement la taille de la page à laquelle elle est appelée à la taille disponible de l'Iframe en utilisant css zoom et moz-transform.
CSS3 peut gérer cela. Ce code devrait gérer la plupart des navigateurs ou simplement le réduire pour répondre à vos besoins. Pas besoin de "régler" tout CSS existant:
iframe {
-moz-transform: scale(0.25, 0.25);
-webkit-transform: scale(0.25, 0.25);
-o-transform: scale(0.25, 0.25);
-ms-transform: scale(0.25, 0.25);
transform: scale(0.25, 0.25);
-moz-transform-origin: top left;
-webkit-transform-origin: top left;
-o-transform-origin: top left;
-ms-transform-origin: top left;
transform-origin: top left;
}
Ou si vous voulez un style en ligne par exemple juste firefox:
<style>
#IDNAME {
-moz-transform: scale(0.25, 0.25);
-moz-transform-origin: top left;
}
</style>
simplement Alors bien sûr ajouter l'ID à votre iframe:
<iframe id="IDNAME" src="http://www.whatever.com"></iframe>
Brillante, et solution simple :) – Aaron
note importante - cela change également la taille de l'ensemble iframe, donc si vous voulez garder une taille définie, vous devez prendre soin de vous-même. Voici un bon exemple en utilisant scroll largeur/hauteur: http://futtta.be/squeezeFrame/ –
C'est assez facile, il suffit de mettre l'iframe dans un div et de forcer la hauteur/largeur que vous voulez. De cette façon que vous rétrécissez ou développez vous ne changera pas le formatage des pages. –
Vous pouvez absolument faire cela, très bien.
mise en garde seulement est que vous devez transformer l'iframe, et la positionner absolue:
iframe {
/* Set the width of the iframe the size you want to transform it FROM */
width: 1108px;
height: 710px;
/* apply the transform */
-webkit-transform:scale(0.25);
-moz-transform:scale(0.25);
-o-transform:scale(0.25);
transform:scale(0.25);
/* position it, as if it was the original size */
position: absolute;
left: -400px;
top: -200px;
}
Pour voir un exemple regarder: http://jsfiddle.net/8DVNa/
Si la même réponse s'applique à deux questions différentes, peut-être ces questions sont identiques . Vous auriez pu signaler la question en tant que doublon au lieu de simplement y répondre à nouveau. –
Vous devriez avoir beaucoup plus de crédit pour cela. Cela fonctionne très bien. – fmz
J'ai plusieurs sites commerciaux que j'ai porté à mon nouveau site et après avoir fixé le view/vantage point de focalisation heres ce que j'ai eu ... le site s'intègre bien dans mon iframe par page ... la différence de taille de police est mieux que le problème de mise au point ... Je suppose c'était un bon compromis
#wrap {
width: 115%;
height: 2000px;
padding: 0;
overflow: hidden;
}
#frame {
-ms-zoom: 0.5;
-ms-transform-origin: 0 0;
-moz-transform: scale(0.75);
-moz-transform-origin: 0px 75px;
-o-transform: scale(0.75);
-o-transform-origin: 0px 75px;
-webkit-transform: scale(0.75);
-webkit-transform-origin: 0 0;
}
#frame {
width: 115%;
height: 2000px;
overflow: hidden;
}
<div id="wrap">
<iframe id="frame" src="http://hempseedoilsoap.com/" scrolling="auto" align="center"></iframe>
</div>
Plusieurs réponses ci-dessous montrent que cela peut être fait. – fmz
Parler de relancer les morts..Si l'utilisateur qui a posé cette question veut changer sa réponse acceptée, ils peuvent le faire. Je ne nie pas que depuis que j'ai fourni ma «réponse», d'autres vraies réponses ont été développées. Voyant que l'écart entre ma «réponse» est fourni et qu'une véritable réponse est fournie sur deux ans, je pense que vous pouvez pardonner à la fois ma réponse et le manque de mise à jour sur la question du PO. – Seidr
Aucune infraction. J'essaie simplement de trouver une solution de travail. Ce n'est pas un sujet facile et il y a peu d'informations utiles. – fmz