如何更改此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，然后尝试将 var selectElements =Array.from( document.getElementsByClassName("select-dropdown")); selectElements.forEach(function(element) { element.addEventListener('click', () => { setTimeout(() => { element.parentElement.getElementsByTagName("ul") [0].getElementsByClassName("form-control")[0].focus(); }, 100); }); 放在该div中。

将iframe应用于新创建的div。

width:50%

.container-wrapper {
width:50%;
}

  

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