Css 在iFrame中缩小文本/内容比例而不创建额外的空白
我在我的网站上有一个iframe浏览器实例,我已经缩小了使用从这里找到的答案的内容。我注意到,因为我使用CSS缩放和变换属性, 我的iframe浏览器实例周围有额外的空白。填充的iframe加上其周围的空白包含iframe的原始宽度和高度(在通过变换和缩放缩小之前) 结果是这样的: 请注意,灰色突出显示的部分是页面的原始非iframe部分。iframe是页面的非突出显示部分。在原始iframe中,有一个缩小的浏览器实例及其周围的额外空白 消除此空白的最佳方法是什么?或者是否有其他方法缩小iframe以避免创建额外的空白 这是我当前的CSS:Css 在iFrame中缩小文本/内容比例而不创建额外的空白,css,html,iframe,Css,Html,Iframe,我在我的网站上有一个iframe浏览器实例,我已经缩小了使用从这里找到的答案的内容。我注意到,因为我使用CSS缩放和变换属性, 我的iframe浏览器实例周围有额外的空白。填充的iframe加上其周围的空白包含iframe的原始宽度和高度(在通过变换和缩放缩小之前) 结果是这样的: 请注意,灰色突出显示的部分是页面的原始非iframe部分。iframe是页面的非突出显示部分。在原始iframe中,有一个缩小的浏览器实例及其周围的额外空白 消除此空白的最佳方法是什么?或者是否有其他方法缩小ifr
#iframe {
width: 800px;
height: 800px;
border; 1px solid black;
zoom: 1.00;
-moz-transform: scale(0.65);
-moz-transform-origin: 0 0;
-o-transform: scale(0.65);
-o-transform-origin: 0 0;
-webkit-transform: scale(0.65);
-webkit-transform-origin: 0 0;
}
和HTML:
<iframe id = 'iframe' src = 'http://www.wsj.com'></iframe>
谢谢 此代码使整个页面嵌入,但您可以调整宽度和高度
<head>
<style type="text/css">
html {height:100%}
body {
margin:0;
height:100%;
overflow:hidden
}
</style>
</head>
<body>
<iframe allowtransparency=true frameborder=0 id=rf sandbox="allow-same-origin allow-forms allow-scripts" scrolling=auto src="http://www.wsj.com" style="width:100%;height:100%"></iframe>
</body>
html{高度:100%}
身体{
保证金:0;
身高:100%;
溢出:隐藏
}
我创建了一个Div来包含iFrame。Div充当iFrame的限制周界,多余的空白被消除
CSS:
HTML:
echo”
";
typo:moz变换原点->moz变换原点
#iframe {
width: 1100px;
height: 1000px;
border: 1px solid black;
zoom: 1.00;
-moz-transform: scale(0.65);
-moz-transform-origin: 0 0;
-o-transform: scale(0.65);
-o-transform-origin: 0 0;
-webkit-transform: scale(0.65);
-webkit-transform-origin: 0 0;
}
#iframetest {
width: 715px;
height: 650px;
margin: 10px;
border-style: solid;
border-width: 10px;
}
#iframetest a {
position: absolute;
top: -16px;
right: -16px;
}
echo "<div id = 'iframetest' style = 'display: none'>
<iframe id = 'iframe' src = 'http://www.wsj.com'></iframe>
<a href = 'javascript: closeiframe();'><img src = 'images/exitbutton.png'
width = '22px' height = '22px'>
</a>
</div>";