使用 iframe 变换比例

Question

我有一个 iframe，我使用 scale 把它变小了，iframe 的大小改变了，但是页面的主体和 iframe 一样大（垂直滚动条）。我做错了什么吗？

.frame {
      width: 1777px;
      height: 2000px;
      transform: scale(0.05);
      transform-origin: 0 0;
    }

<html>
    <body>
        <iframe class="frame" src="https://wikipedia.com" frameborder="0"></iframe>
    </body>
</html>

Answer 1

.frame {
    width: 100%;
    height: 100%;
}

Answer 2

如果您将 iframe 放入容器中 - 容器具有较小的尺寸 - 并将 iframe 定位为绝对位置，那么它似乎工作正常（即 iframe 被开玩笑说它具有较大的视口尺寸）。

.container {
  width: calc(1777px * 0.05);
  height: calc(2000px * 0.05);
  position: relative;
}

.frame {
  width: 1777px;
  height: 2000px;
  transform: scale(0.05);
  transform-origin: 0 0;
  position: absolute;
  left: 0;
  top: 0;
}

<div class="container">
  <iframe class="frame" src="https://wikipedia.com" frameborder="0"></iframe>
</div>

使用 iframe 变换比例

Transform scale with iframe

html

css

iframe

scale