当前位置:  开发笔记 > 编程语言 > 正文

可以缩小iframe的内容吗?

如何解决《可以缩小iframe的内容吗?》经验,为你挑选了3个好方法。

有没有办法在不调整CSS的情况下缩小iframe内部的内容?

那里有任何神奇的"缩放"参数吗?!!!

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



1> Justin Emlay..:

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:


然后,当然只需将ID添加到您的iframe:




2> futtta..:

如果您控制Iframe内容,您可能会发现我的这个小黑客很有用:http://futtta.be/squeezeFrame/

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



3> Tristan Brot..:

你绝对可以做到这一点,就好了.

只需告诫你需要转换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/

推荐阅读
牛尾巴2010
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有