在一定大小的 iframe 中显示完整的网站

Question

第一次在这里发布海报。

简而言之，我试图在 iframe 中显示一个网站。我希望 iframe 显示网站的全屏。我设法做到这一点的唯一方法是调整容器的大小。

我可以简单地缩小 iframe 吗？

希望我已经足够清楚地解释了自己。

.gridgames {
  height: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  grid-gap: 10px;
  margin: 2rem;
}

.game {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 20rem;
  margin: auto;
  background-color: green;
  transition: 150ms;
}

.game:hover {
  transform: scale(1.1);
}

iframe {
  width: 100%;
  height: 100%;
  border: none;
  overflow: hidden;
}

 <section class="gridgames">
      <div class="game"><iframe src="https://barneslow.com/"></iframe>​</div>
      <div class="game">Sample Game</div>
      <div class="game">Sample Game</div>
      <div class="game">Sample Game</div>
      <div class="game">Sample Game</div>
      <div class="game">Sample Game</div>
    </section>

我附上了一些代码来概述我的问题。

是否可以在 iframe 上“缩小”？

Answer 1

使用这个：

transform:scale(0.5); //50% zoom

这只是根据比例值缩小整个 iFrame。

您可能还需要更改宽度和高度以及边距和位置。