#wrap #frame解决方案很好，只要#wrap中的数字是#frame乘以比例因子。它只显示了缩小框架的那一部分。你可以在这里看到它缩小网站，并把它变成pinterest一样的形式(与woodmark jQuery插件):

http://www.genautica.com/sandbox/woodmark-index.html

如前所述，我怀疑你做不到。 也许你可以至少缩放文本本身，通过设置一个样式font-size: 80%;。 未经测试，不确定它的工作，不会调整框或图像的大小。

您不需要用额外的标记来包装iframe。只要确保你增加iframe的宽度和高度，就像你缩小iframe一样。

例如，将iframe内容缩放到80%:

#frame { /* Example size! */
    height: 400px; /* original height */
    width: 100%; /* original width */
}
#frame {
    height: 500px; /* new height (400 * (1/0.8) ) */
    width: 125%; /* new width (100 * (1/0.8) )*/

    transform: scale(0.8); 
    transform-origin: 0 0;
}

基本上，为了获得相同大小的iframe，你需要缩放尺寸。

我刚测试过，对我来说，其他的解决方案都不奏效。 我只是简单地尝试了一下，它在Firefox和Chrome上运行得很好。

<div class='wrap'>
  <iframe ...></iframe>
</div>

还有css:

.wrap {
  width: 640px;
  height: 480px;
  overflow: hidden;
}

iframe {
  width: 76.92% !important;
  height: 76.92% !important;
  -webkit-transform: scale(1.3);
  transform: scale(1.3);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}

这将所有内容放大23.08%，相当于原始版本比嵌入式版本大30%。(宽度/高度百分比当然需要相应调整(1/scale_factor))。

我想分享一下我的想法，使用上面给出的大部分内容。我还没有检查Chrome浏览器，但据我所知，它在IE、Firefox和Safari浏览器中都可以运行。

这个例子中的具体偏移量和缩放因子适用于Facebook标签的iframe中缩小和居中两个网站(宽度为810px)。

使用的两个网站是一个wordpress网站和一个ning网络。我不是很擅长html，所以这可能已经做得更好，但结果似乎不错。

<style>
    #wrap { width: 1620px; height: 3500px; padding: 0; position:relative; left:-100px; top:0px; overflow: hidden; }
    #frame { width: 1620px; height: 3500px; position:relative; left:-65px; top:0px; }
    #frame { -ms-zoom: 0.7; -moz-transform: scale(0.7); -moz-transform-origin: 0px 0; -o-transform: scale(0.7); -o-transform-origin: 0 0; -webkit-transform: scale(0.7); -webkit-transform-origin: 0 0; }
</style>
<div id="wrap">
    <iframe id="frame" src="http://www.example.com"></iframe>
</div>

如果您希望iframe及其内容在窗口调整大小时缩放，您可以将以下设置为窗口的resize事件以及iframes onload事件。

function()
{
    var _wrapWidth=$('#wrap').width();
    var _frameWidth=$($('#frame')[0].contentDocument).width();

    if(!this.contentLoaded)
      this.initialWidth=_frameWidth;
    this.contentLoaded=true;
    var frame=$('#frame')[0];

    var percent=_wrapWidth/this.initialWidth;

    frame.style.width=100.0/percent+"%";
    frame.style.height=100.0/percent+"%";

    frame.style.zoom=percent;
    frame.style.webkitTransform='scale('+percent+')';
    frame.style.webkitTransformOrigin='top left';
    frame.style.MozTransform='scale('+percent+')';
    frame.style.MozTransformOrigin='top left';
    frame.style.oTransform='scale('+percent+')';
    frame.style.oTransformOrigin='top left';
  };

这将使iframe及其内容缩放到包装div的100%宽度(或任何你想要的百分比)。作为一个额外的好处，你不必将框架的css设置为硬编码值，因为它们都是动态设置的，你只需要担心你想要如何显示wrap div。

我已经测试过了，它可以在chrome, IE11和firefox上运行。