对于这个 Google 电子表格发布的图表，我也遇到了这个问题。顺便说一句，您的标题具有误导性，这不是 Google Chart，这是 Google 的另一个不同产品，用于创建真正合适的网络图表，which also can be responsive 和 also using Spreadsheets data。
回到问题上来，“Google 电子表格发布的图表”内容本身没有响应性，这与如何使 iframe 本身具有响应性无关。
iframe 可以是响应式的，但我们无法将已发布的 Google 电子表格中的图表内容修改为响应式，afaik。
我已经尝试了一些类似的技巧，它仅适用于视频和一些响应式内容网站。
http://jsfiddle.net/marhensa/g9op54wx/
还有其他类似这样的巧妙技巧
https://codepen.io/alxfyv/pen/QEjEbp
但问题是 iframe 内容也必须是响应式的。
如果您只是想让它工作并且非常简单，请不要使用 iframe，使用简单的image responsive，只需将您发布的 Google 电子表格图表 URL 的末尾从 format=interactive 更改为 format=image
遗憾的是，解决此问题的正确方法只是缩放，就像您在问题中所说的转换/缩放它。如果包装器的内容没有响应并且您希望像这样动态调整它的大小（文本也会更小）
recorded example，然后缩放它。顺便说一下，该示例是一个 HTML 文本和一些图形页面，它在缩放时的行为类似于 SVG/图像文件。
在此解释：https://css-tricks.com/scaled-proportional-blocks-with-css-and-javascript
同样在 Angular 中完成：https://stackblitz.com/edit/angular-vagpoq
编辑：如果您可以使用缩放和较小的文本/细线，工作解决方案是在 HTML 头部部分使用这种 JS + JQuery 缩放方法，这是由 yazzz here 编写的，赞在那个链接中给她/他，而不是在这里。
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">
</script>
<script>
// this script is written by yazzz https://stackoverflow.com/a/35819751/9894532
$(function() {
$("#wrapper").each(function() {
var $wrap = $(this);
function iframeScaler(){
var wrapWidth = $wrap.width(); // width of the wrapper
var wrapHeight = $wrap.height();
var childWidth = $wrap.children("iframe").width(); // width of child iframe
var childHeight = $wrap.children("iframe").height(); // child height
var wScale = wrapWidth / childWidth;
var hScale = wrapHeight / childHeight;
var scale = Math.min(wScale,hScale); // get the lowest ratio
$wrap.children("iframe").css({"transform": "scale("+scale+")", "transform-origin": "left top" }); // set scale
};
$(window).on("resize", iframeScaler);
$(document).ready( iframeScaler);
});
});
</script>
</head>
<body>
<p>Responsive and Dynamic Iframe Scaling of Published Chart from Google Spreadsheet</p>
<p>Courtesy of <a href="https://stackoverflow.com/a/35819751/9894532">yazzz from Javascript StackOverflow</a></p>
<div id="wrapper">
<iframe width="500" height="294" seamless frameborder="0" scrolling="no" src="https://docs.google.com/spreadsheets/d/e/2PACX-1vRB4wPFarqsHWgk0ubQ6bH3YC5iwvDayAkrDg0iNPipAAszBA26QnFaPC1Xk5g8XF1ixP7jnsxiaMzL/pubchart?oid=1495533449&format=interactive"></iframe>
</div>
</body>
您还可以在 JS Fiddle 中查看他/她对我的示例的实现
https://jsfiddle.net/marhensa/10radjqo