可以缩小iframe的内容?

问题描述 投票:0回答:6

有一种方法可以在不调整CSS的情况下缩小iframe内部的内容?

在那里任何神奇的“ Zoom”参数?!!!

我有一个600px预览iframe,我想在没有滚动条的情况下安装一个1000px网站...

javascript jquery html
6个回答
63
投票

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

或如果您想要内联样式,例如Firefox:

<style> #IDNAME { -moz-transform: scale(0.25, 0.25); -moz-transform-origin: top left; } </style>

当然,只需将ID添加到您的iframe:

<iframe id="IDNAME" src="http://www.whatever.com"></iframe>


您绝对可以做到这一点,很好。


9
投票

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

查看一个示例,请查看:

http://jsfiddle.net/8dvna/

    

如果您控制了iframe-content,您可能会发现我的这个小骇客有用:

http://futtta.be/squeezeframe/

7
投票
这是一个跨浏览器独立的JavaScript的东西,它试图自动调整其调用的页面大小,从使用CSS Zoom和Moz-Transform。

我有几个购物网站,我已经移植到新网站, 修复了我得到的view/vantage

焦点之后... 该网站非常适合我的每个页面...字体大小差异 比重点问题更好... 我想这是一个很好的交易

iframe

2
投票

韦尔,简而言之

您可以使用在线CSS将宽度/高度设置为600px,然后设置
#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>
overflow:hidden



0
投票

https://developer.mozilla.org/en-us/docs/web/css/zoom,

即将在您的iframe中添加

zoom: 0.75
css属性。


0
投票

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.