Question

<iframe height=468 width=1584 src="//docs.google.com/spreadsheets/d/1hUgiZqpgjqqtpnYY6Q1IeoUYlpXlCRUeARpN3cWX87g/gviz/chartiframe?oid=2131305794" seamless frameborder=0 scrolling=no></iframe>

即使将宽度更改为100％，也无法使其响应。我在WordPress网站上嵌入了这个图表。

Answer 1

将div放在iframe（作为父元素）周围，并将CSS“transform：scale（0.5）”设置为该div。

<div style="transform: scale(0.5, 0.5);">
<iframe ...>
</div>

它将调整整个框架的大小，包括其内容。

Answer 2

我已经为您做了一些网上搜索，并提供了多种解决方案。其中最流行的似乎是使用JQuery来正确调整iFrame的大小。

此处可找到脚本链接：jQuery Responsive iFrame's

<!-- Activate responsiveness in the "child" page -->
<script src="/js/jquery.responsiveiframe.js"></script>
<script>
  var ri = responsiveIframe();
  ri.allowResponsiveEmbedding();
</script>

<!-- Corresponding code in the "parent" page -->
<script src="/js/jquery.js"></script>
<script src="/js/jquery.responsiveiframe.js"></script>
<script>
  ;(function($){          
      $(function(){
        $('#myIframeID').responsiveIframe({ xdomain: '*'});
      });        
  })(jQuery);
</script>

从那里开始，只需让iFrame的ID为myIframeID，或者只是更改上面脚本中的文字即可。

如果这对您不起作用，我建议您使用我的Google搜索字符串查找其他可能的解决方案：responsive iframe width

祝你好运！

如何使谷歌电子表格图表响应

2 个答案: