我只需缩放相框内容。在我的网页中,我使用了zoom: 0.75; height: 520px; width: 800px;
。如果我增加缩放值,则意味着帧尺寸将增加。
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<STYLE>
#frame { width: 800px; height: 520px; border: 1px solid black; }
#frame { zoom: 0.75; -moz-transform: scale(0.75); -moz-transform-origin: 0 0; }
</STYLE>
</HEAD>
<BODY>
<IFRAME id="frame" src="http://www.google.com"></IFRAME>
</BODY>
</HTML>
在上面的示例HTML页面中,我想在不改变IFRAME大小的情况下缩放IFRAME的内容。
答案 0 :(得分:15)
我在我的脸书中使用了一个脚本,它在IE和Firefox中工作
<style type="text/css">
#iframe {
zoom: 0.15;
-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>
<iframe src="https://www.wikipedia.org/" height="700" width="550">Wikipedia Encyclopedia</iframe>
答案 1 :(得分:5)
不确定这适用于链接文档,但对于本地托管的内容,以下方法有效:
<IFRAME id="frame" src="local.pdf#zoom=100"></IFRAME>
答案 2 :(得分:3)
为此你可能需要使用javascript。
这里有一个jQuery的缩放插件:http://css-tricks.com/examples/AnythingZoomer/
您可以将iframes src更改为本地网页(例如frame.htm),在框架中放置一个div并使用jquery load()函数将内容加载到框架中:
<script type="text/javascript">
$(document).ready(function() {
$("#loadGoogle").load("pageToLoad.html", function(){
//loaded
});
})
</script>
<div id="loadGoogle" style="width: 100%; height: 100%;"></div>
然后使用框架内的jquery zoom插件缩放内容。
<script type="text/javascript">
$("#loadGoogle").anythingZoomer({
expansionSize: 30,
speedMultiplier: 1.4
});
</script>
答案 3 :(得分:-1)