Question

有没有办法在不调整css的情况下缩小iframe中的内容？

那里有任何神奇的“缩放”参数吗？!!!

我有一个600px预览iframe我想在没有滚动条的情况下适合1000px网站...

Answer 1

CSS3可以处理这个问题。这段代码应该可以处理大多数浏览器或简单地减少它以满足您的需求。无需“调整”任何现有的CSS：

iframe {
  -moz-transform: scale(0.25, 0.25); 
  -webkit-transform: scale(0.25, 0.25); 
  -o-transform: scale(0.25, 0.25);
  -ms-transform: scale(0.25, 0.25);
  transform: scale(0.25, 0.25); 
  -moz-transform-origin: top left;
  -webkit-transform-origin: top left;
  -o-transform-origin: top left;
  -ms-transform-origin: top left;
  transform-origin: top left;
}

或者如果你想要内联样式，例如firefox：

<style>
  #IDNAME {
    -moz-transform: scale(0.25, 0.25); 
    -moz-transform-origin: top left;
  }
</style>

然后，当然只需将ID添加到您的iframe：

<iframe id="IDNAME" src="http://www.whatever.com"></iframe>

Answer 2

如果你控制了iframe内容，你可能会发现我的这个小黑客很有用：http://futtta.be/squeezeFrame/

这是一个跨浏览器的独立javascript，尝试使用css zoom和moz-transform自动调整所调用页面的大小到iframe的可用大小。

Answer 3

你绝对可以做到这一点，就好了。

只需告诫你需要转换iframe，并将其定位为绝对值：

iframe {
  /* Set the width of the iframe the size you want to transform it FROM */
  width: 1108px;
  height: 710px;
  /* apply the transform */
  -webkit-transform:scale(0.25);
  -moz-transform:scale(0.25);
  -o-transform:scale(0.25);
  transform:scale(0.25);
  /* position it, as if it was the original size */
  position: absolute;
  left: -400px;
  top: -200px;
}

要查看示例：http://jsfiddle.net/8DVNa/

Answer 4

嗯，简而言之。

您可以使用内联CSS将宽度/高度设置为600px，然后还可以设置overflow:hidden

Answer 5

我有几个购物网站，我已移植到我的新网站和在确定了view/vantage焦点后，我得到了什么...... 该网站很适合我每页iframe ...字体大小差异比焦点问题更好...... 我想这是一个很好的交易

    #wrap {  
        width: 115%;
        height: 2000px;
        padding: 0;
        overflow: hidden;
}
    #frame {  
        -ms-zoom: 0.5;
        -ms-transform-origin: 0 0;
        -moz-transform: scale(0.75);
        -moz-transform-origin: 0px 75px;
        -o-transform: scale(0.75);
        -o-transform-origin: 0px 75px;
        -webkit-transform: scale(0.75);
        -webkit-transform-origin: 0 0;
}
    #frame {
        width: 115%;
        height: 2000px;
        overflow: hidden;
}

    <div id="wrap">
        <iframe id="frame" src="http://hempseedoilsoap.com/" scrolling="auto" align="center"></iframe>
    </div>

Answer 6

我不敢。您唯一的选择是使用特定于站点的CSS修饰符来减少字体和元素大小。

可以缩小iframe的内容吗？

6 个答案: