Question

我有一个显示缩放网站的iframe，但在缩放后，空格会停留，其大小是缩放前的大小。我试图用不同的div来包装它，因为我找到了一些解决方案，但它不适用于我，空间仍在那里。

你可以看到它here。

HTML

<div id='wrap'>    
<div id='preview_div'>
     <iframe src="../404/index.php"></iframe>
</div>
</div>

CSS

#preview_div {
    position: relative;
    width: 700px;
    height:600px;
    margin:auto;
}

iframe {
    background-color:white;
    width: 1400px;
    height: 960px;
    position: relative;
    overflow:hidden;
    border: none;

    -moz-transform: scale(0.5);
    -moz-transform-origin: 0 0;
    -o-transform: scale(0.5);
    -o-transform-origin: 0 0;
    -webkit-transform: scale(0.5);
    -webkit-transform-origin: 0 0;
}

#wrap {
    width:700px;
    height:600px;
    margin:auto;
    float:left;
}

有什么想法吗？感谢。

Answer 1

如果您想摆脱窗口滚动条，可以将overflow: hidden应用于#preview_div以隐藏额外空间。

Answer 2

在iFrame容器中，div（）的CSS宽度为630px。 iFrame本身也有一个像素。

css缩放后的空格

2 个答案: