如何调整 iframe 内容的大小答案

【问题标题】：How to resize iframe content如何调整 iframe 内容的大小
【发布时间】：2013-08-10 19:10:02
【问题描述】：

我创建了一个网站，并使用视点元标记，我将内容设置为 1200 像素，<meta name="viewport" content="width=1400, initlia-sclae=1.0, user-scalable=yes">。好吧，它工作正常，但现在我必须创建一个 iframe（在外部站点中），其中包含我的站点。但是我可用的空间小于内容宽度，所以你必须水平滚动才能查看所有内容。

我试过这样做：<iframe src="http://tlicetlac.tumblr.com" width="800px" height="400px" style="-webkit-transform:scale(0.9);-moz-transform-scale(0.9);"></iframe>，但没有成功，因为也调整了 iframe 的显示区域。

那么，我可以设置多个视点来调整多个网站的内容吗？

【问题讨论】：

标签： resize

【解决方案1】：

<div
   style="
      overflow: hidden;
      display:inline-block;">
   <iframe
      src='https://en.wikipedia.org/wiki/Punding'
      scrolling="no"
      frameBorder="0"
      style="
          width: 660px;
          height: 1000px;
          margin-top: -180px;
          margin-left: -200px;
        -webkit-transform:scale(0.8);
        -moz-transform:scale(0.8);
        -o-transform:scale(0.8);
        -ms-transform:scale(0.8);"
   ></iframe>
</div>

【讨论】：

【解决方案2】：

我试过你的代码，它运行良好。你可以在这里看到Resize external website content to fit iFrame width

我用它来将世界时钟地图从另一个网站调整到我的网站。
这是我的代码：

<div id="containerworldTime">
  <iframe src="http://24timezones.com/" width="992" height="500" scrolling="no" ></iframe>
</div>  
#containerworldTime {
    height: 395px;
    margin:auto;
    overflow: hidden;
    width: 770px;
    border:red solid 5px;
}
#containerworldTime iframe {
    border: 0 solid;
    height: 1103px;
    margin-left: -110px;
    margin-top: -385px;
    width: 979px;
    -webkit-transform:scale(0.8);
    -moz-transform:scale(0.8);
    -o-transform:scale(0.8);
    -ms-transform:scale(0.8);
}

and see this example

【讨论】：