有一种方法可以在不调整CSS的情况下缩小iframe内部的内容?
在那里任何神奇的“ Zoom”参数?!!!我有一个600px预览iframe,我想在没有滚动条的情况下安装一个1000px网站...
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>
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/ http://futtta.be/squeezeframe/
我有几个购物网站,我已经移植到新网站,
修复了我得到的view/vantage
iframe
韦尔,简而言之 您可以使用在线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
即将在您的iframe中添加
zoom: 0.75
css属性。