如何更改此iframe的大小？

Question

我想将此iframe嵌入到我的网页中：

<iframe height="600px" width="600px" src="https://ionicabizau.github.io/github-profile-languages/api.html?damienAllonsius" frameborder="0"></iframe>

编辑

我得到了这个很酷的结果，但是不幸的是， iframe太大了。

那我该如何重新缩放呢？ 假设我要缩小50％。

当我将属性height和width从600更改为300 ，我得到了这个结果

我该如何解决？ 使用CSS类更改宽度和高度不会更改结果。 任何想法？

Answer 1

只需将CSS属性transform和transform-origin应用于iframe ：

transform将更改整个DOM object树的大小（还包括字体大小等）

transform-origin将指定调整大小应从top left开始。 否则，它将从中心调整大小，并且调整大小的iframe将在中间流动。

 #frame { border: 1px solid black; transform: scale(0.5); transform-origin: top left; }

 <iframe id="frame" src="http://google.at" frameborder="0"></iframe>

Answer 2

您可能需要一个div，然后尝试将iframe放入该div中。

将width:50%应用于新创建的div。

 .container-wrapper { width:50%; }

 <!DOCTYPE html> <html> <body> <h2>HTML Iframes</h2> <p>You can use the height and width attributes to specify the size of the iframe:</p> <div class="container-wrapper"> <iframe src="https://ionicabizau.github.io/github-profile-languages/" height="100%" width="100%"> </iframe> </div> </body> </html>

您的iframe内容应具有足够的响应速度才能显示。

如何更改此iframe的大小？

问题描述

2 个解决方案

解决方案1
2 已采纳 2019-07-15 08:47:27

解决方案2
0 2019-07-15 08:42:47

如何更改此iframe的大小？

问题描述

2 个解决方案

解决方案1 2 已采纳 2019-07-15 08:47:27

解决方案2 0 2019-07-15 08:42:47

解决方案1
2 已采纳 2019-07-15 08:47:27

解决方案2
0 2019-07-15 08:42:47