您不需要用额外的标记来包装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，你需要缩放尺寸。

在花了几个小时试图让它在IE8、9和10中工作之后，下面是对我有效的方法。

这个精简的CSS工作在FF 26, Chrome 32, Opera 18，和IE9 -11 2014年1月7日:

.wrap
{
    width: 320px;
    height: 192px;
    padding: 0;
    overflow: hidden;
}

.frame
{
    width: 1280px;
    height: 786px;
    border: 0;

    -ms-transform: scale(0.25);
    -moz-transform: scale(0.25);
    -o-transform: scale(0.25);
    -webkit-transform: scale(0.25);
    transform: scale(0.25);

    -ms-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
}

对于IE8，设置宽度/高度以匹配iframe，并在.wrap container div中添加-ms-zoom:

.wrap
{
    width: 1280px; /* same size as frame */
    height: 768px;
    -ms-zoom: 0.25; /* for IE 8 ONLY */
}

只需使用您最喜欢的浏览器嗅探方法，有条件地包含适当的CSS，参见是否有一种方法在*.css文件中执行特定于浏览器的条件CSS ?为了一些想法。

IE7是一个失败的原因，因为-ms-zoom直到IE8才出现。

下面是我测试的实际HTML:

<div class="wrap">
   <iframe class="frame" src="http://time.is"></iframe>
</div>
<div class="wrap">
    <iframe class="frame" src="http://apple.com"></iframe>
</div>

http://jsfiddle.net/esassaman/PnWFY/

如果你的html是用css样式的，你可能可以链接不同大小的不同样式表。

这些解决方案不适合我(模糊)与Flexbox和iFrame在100%，但如果iFrame使用rem em或百分比单位，那么有一个解决方案看起来很棒:

  window.onload = function(){
    let ifElem = document.getElementById("iframe-id");
    ifElem.contentWindow.document.documentElement.style.fontSize="80%";
  }

我不认为HTML有这样的功能。我唯一能想到的是做一些服务器端处理。也许你可以获得你想要服务的网页的图像快照，在服务器上缩放它并将其提供给客户端。然而，这将是一个非交互式页面。(也许imagemap可以有链接，但仍然如此。)

另一个想法是有一个服务器端组件来修改HTML。有点像火狐2.0的缩放功能。这当然不是完美的变焦，但总比没有好。

除此之外，我没有别的办法了。

我认为你可以通过javascript(通过document.body.clientWidth等)计算你想要的高度和宽度，然后像这样将iframe注入你的HTML:

var element = document.getElementById("myid");
element.innerHTML += "<iframe src='http://www.google.com' height='200' width='" + document.body.clientWidth * 0.8 + "'/>";

我没有在IE6中测试这个功能，但它似乎与好版本一起工作:)