将文本/内容缩小到iFrame中,而不会创建额外的空白区域

Question

我有我的网站上我已经缩小使用此找到答案的内容的iframe的浏览器实例的问题.我注意到因为我使用CSS缩放和转换属性,我在iframe浏览器实例周围获得了额外的空白.填充的iframe加上它周围的空白区域包含我的iframe的原始宽度和高度(在通过变换和缩放缩小之前).

这就是结果:

请注意,灰色突出显示的部分是页面的原始非iframe部分.iframe是页面的非突出显示部分.在原始iframe中,有缩小的浏览器实例和周围的额外空白区域.

什么是摆脱这个空白区域的最佳方法,或者有一种不同的方法来缩小我的iframe,以便不创建额外的空白区域？

这是我目前的CSS:

#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>

谢谢!

Answer 1

我创建了一个包含iFrame的Div.Div作为iFrame的限制性边界,消除了额外的空白区域.

CSS:

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

HTML:

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