如何缩放iframe的内容?

html CSS

小胖

2020-03-30

如何在网站页面中缩放iframe的内容(在我的示例中是HTML页面,而不是弹出窗口)?

例如,我想以80%的原始大小显示iframe中显示的内容。

第3873篇《如何缩放iframe的内容?》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

13个回答
阿飞 2020.03.30

如前所述,我怀疑您能做到。
也许您可以通过设置样式至少缩放文本本身font-size: 80%;
未经测试,不确定它是否有效,并且不会调整框或图像的大小。

猴子 2020.03.30

如果您的html使用CSS设置样式,则可以链接不同大小的不同样式表。

樱小胖Mandy 2020.03.30

我不认为HTML具有这种功能。我能想象的唯一的办法就是做一些服务器端处理。也许您可以获得要提供的网页的图像快照,将其在服务器上缩放并提供给客户端。但是,这将是一个非交互式页面。(也许图像映射可能具有链接,但仍然存在。)

另一个想法是拥有一个可以更改HTML的服务器端组件。类似于firefox 2.0缩放功能的SOrt。这当然不是完美的缩放,但总比没有好。

除此之外,我没有主意。

蛋蛋猿 2020.03.30

#wrap #frame解决方案可以正常工作,只要#wrap中的数字是#frame乘以比例因子即可。它仅显示缩小帧的那部分。您可以在此处看到它缩小网站规模并将其放入pinterest之类的形式(带有木印jQuery插件):

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

Tony凯 2020.03.30

对于那些在IE中无法正常使用的人,-ms-zoom按照以下建议使用并在#wrapdiv 上使用缩放功能(而不是iframeid)会很有帮助以我的经验,该zoom函数尝试缩放的iframe div #frame,它将缩放iframe的大小,而不是其中的内容(这就是您要的)。

看起来像这样。适用于IE8,Chrome和FF。

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

这是我在宽度为890px的页面上的解决方案

#frame { 
overflow: hidden;
position: relative;
width:1044px;
height:1600px;
-ms-zoom: 0.85;
-moz-transform: scale(0.85);
-moz-transform-origin: 0px 0;
-o-transform: scale(0.85);
-o-transform-origin: 0 0;
-webkit-transform: scale(0.85);
-webkit-transform-origin: 0 0; 

}
小卤蛋 2020.03.30

html {zoom:0.4;}?-)

小胖Gil 2020.03.30

以为我会分享我的想法,并使用上面给出的很多内容。据我所知,我尚未检查Chrome,但它可以在IE,Firefox和Safari中使用。

在此示例中,特定的偏移量和缩放系数可用于在iframe中将Facebook标签的宽度(810像素)缩小和居中。

使用的两个站点是wordpress站点和ning网络。我对html不太满意,所以可能做得更好,但结果似乎不错。

<style>
    #wrap { width: 1620px; height: 3500px; padding: 0; position:relative; left:-100px; top:0px; overflow: hidden; }
    #frame { width: 1620px; height: 3500px; position:relative; left:-65px; top:0px; }
    #frame { -ms-zoom: 0.7; -moz-transform: scale(0.7); -moz-transform-origin: 0px 0; -o-transform: scale(0.7); -o-transform-origin: 0 0; -webkit-transform: scale(0.7); -webkit-transform-origin: 0 0; }
</style>
<div id="wrap">
    <iframe id="frame" src="http://www.example.com"></iframe>
</div>
2020.03.30

经过数小时的努力后,尝试将其在IE8、9和10中使用,这对我来说很有效。

截至2014年1月7日,此精简CSS可在FF 26,Chrome 32,Opera 18和IE9 -11中运行:

.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;
}

对于IE8,设置宽度/高度以匹配iframe,然后将-ms-zoom添加到.wrap容器div中:

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

只需使用您喜欢的方法进行浏览器嗅探以有条件地包括适当的CSS,请参阅是否可以在* .css文件中进行特定于浏览器的条件CSS?一些想法。

IE7是一个丢失的原因,因为直到IE8才存在-ms-zoom。

这是我测试过的实际HTML:

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

老丝阿飞 2020.03.30

我找到了一个可以在IE和Firefox中运行的解决方案(至少在当前版本上)。在Safari / Chrome上,iframe的大小已调整为其原始大小的75%,但iframe中的内容根本没有缩放。在Opera中,这似乎不起作用。这感觉有些深奥,因此,如果有更好的方法,我欢迎提出建议。

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

注意:我必须将wrap元素用于Firefox。由于某些原因,在Firefox中,当您将对象缩小75%时,出于布局原因,它仍使用图像的原始大小。(尝试从上面的示例代码中删除div,您将明白我的意思。)

我从这个问题中发现了一些

神乐 2020.03.30

您无需使用其他代码包装iframe。只要确保将iframe的宽度和高度增加到与缩小iframe相同的数量即可。

例如将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;
}

基本上,要获得相同大小的iframe,您需要缩放尺寸。

卡卡西 2020.03.30

lxs的回答的后续工作:我注意到一个问题,即同时具有zoom--webkit-transform标签似乎通过执行双重缩放效果而使Chrome(版本15.0.874.15)感到困惑。通过替换zoom-ms-zoom(仅针对IE),我得以解决该问题,让Chrome仅使用该--webkit-transform标记,从而使事情得以解决

卡卡西Near 2020.03.30

如果将CSS更改为:Kip的解决方案应可在Opera和Safari上使用

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

您可能还需要指定溢出:在#frame上隐藏以防止滚动条。

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android