html - 如何将 HTML 页面设置为在宽度小于页面本身的 iframe 中可见？

Question

我有一个 HTML 和相关 CSS 和 JS 的网页，我也可以使用宽度小于网页的 iFrame，现在我想在 iFrame 中以一种不会扭曲的方式显示这个网页，简而言之我也想将网页配置为在较小的 iFrame 中得到修复..

指导我完成这项工作...

Answer 1

由于显而易见的原因，它很狡猾，但您可以使用 CSS 转换来做到这一点。以内容的正确大小加载 iframe，然后使用转换缩小 iframe。假设您的内容是 1000x1000，而您想要的 iframe 是 500x500。

在适合的框架中加载内容:

<iframe id="magic" src="whatever" width="1000" height="1000"></iframe>

然后用 CSS 把它缩小一半:

#magic {
  -webkit-transform: scale(0.5);
  -moz-transform: scale(0.5);
  -ms-transform: scale(0.5);
  -o-transform: scale(0.5);
  transform: scale(0.5);
}