如何更改此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