我如何能缩放一个iframe的内容(在我的例子中,它是一个HTML页面,而不是一个弹出窗口)在我的网站的页面?
例如,我想以原始大小的80%显示iframe中的内容。
我如何能缩放一个iframe的内容(在我的例子中,它是一个HTML页面,而不是一个弹出窗口)在我的网站的页面?
例如,我想以原始大小的80%显示iframe中的内容。
当前回答
我刚测试过,对我来说,其他的解决方案都不奏效。 我只是简单地尝试了一下,它在Firefox和Chrome上运行得很好。
<div class='wrap'>
<iframe ...></iframe>
</div>
还有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;
}
这将所有内容放大23.08%,相当于原始版本比嵌入式版本大30%。(宽度/高度百分比当然需要相应调整(1/scale_factor))。
其他回答
#wrap #frame解决方案很好,只要#wrap中的数字是#frame乘以比例因子。它只显示了缩小框架的那一部分。你可以在这里看到它缩小网站,并把它变成pinterest一样的形式(与woodmark jQuery插件):
http://www.genautica.com/sandbox/woodmark-index.html
用CSS:
html{
zoom:0.4;
}
?-)
我刚测试过,对我来说,其他的解决方案都不奏效。 我只是简单地尝试了一下,它在Firefox和Chrome上运行得很好。
<div class='wrap'>
<iframe ...></iframe>
</div>
还有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;
}
这将所有内容放大23.08%,相当于原始版本比嵌入式版本大30%。(宽度/高度百分比当然需要相应调整(1/scale_factor))。
所以可能不是最好的解决方案,但似乎还可以。
<IFRAME ID=myframe SRC=.... ></IFRAME>
<SCRIPT>
window.onload = function(){document.getElementById('myframe').contentWindow.document.body.style = 'zoom:50%;';};
</SCRIPT>
显然不是试图修复父元素,只是添加了“缩放:50%”样式到子元素的主体,并使用了一点javascript。
也许可以设置“HTML”元素的样式,但没有尝试。
如前所述,我怀疑你做不到。 也许你可以至少缩放文本本身,通过设置一个样式font-size: 80%;。 未经测试,不确定它的工作,不会调整框或图像的大小。