Html 如何为iframe设置自定义视口？

好的。事实上，也许这个标题毫无意义

请阅读：

我想创建一个具有自定义宽度的iframe。可以请尽量理解

我不希望iframe具有响应性（嵌入iframe中的站点具有响应性），我希望它看起来像一张缩小的图片

---

如果你愿意，我可以给你举一些例子。知道怎么做吗？

如果您已经尝试了

width

属性，但该属性不起作用，请尝试使用CSS'

max width

属性

例如

index.html

<iframe src="http://www.google.com/" class="if"></iframe>

---

您可以使用css转换缩放iframe。例如，如果希望使iframe中的页面显示为一半大小

iframe {
  transform: scale(0.5, 0.5);
  height: 1000px;
  width: 1000px;
}

<iframe src='http://www.google.com'></iframe>

iframe{
变换：比例（0.5,0.5）；
高度：1000px；
宽度：1000px；
}

---

这将显示一个1000x1000的页面视口，缩小为500x500 iframe。

如果width属性不适用于您，您可以提供示例吗？我认为OP建议的是，加载到iframe中的站点/页面需要缩小，以适应可用的iframe窗口。或者换句话说，设置页面的视口。然而，据我所知，仅仅使用html是不可能的，因为视口是在原始页面本身声明的，而不是在外部声明的。可能有一些JQuery插件，但我不知道有任何这样的选项。如果你发现我的答案或Omar的答案有帮助，至少你可以接受它作为一个最佳答案。嗨，很抱歉这么晚回复。实际上，我的问题是我想在500px容器中显示100%的iframe宽度，而不滚动，宽度仍然应该是100%（尽管窗口看起来要小得多）。您的解决方案帮助解决了我的问题

iframe {
  transform: scale(0.5, 0.5);
  height: 1000px;
  width: 1000px;
}

<iframe src='http://www.google.com'></iframe>