我想从谷歌表格创建一个图表。我从电子表格中导出图表，我需要一个 URL。但是由于cors问题，我无法使其响应。所以，我认为整个 iframe 通过转换响应：规模？但这不是一个好的解决方案。你有没有想法让这个 iframe 响应？
以下是我的片段：-
<div
class="responsive"
>
<iframe
width="698.1827830188679"
height="305.5"
seamless
frameborder="0"
scrolling="no"
src="https://docs.google.com/spreadsheets/d/e/2PACX-1vQuSWCpXJIwSPNJEE6iqzsJTxkPdSiL6uZaqph-CtMXh5QDw8Z9pESPB_0VenmhF4Dx6H5GLylHztAO/pubchart?oid=1827562470&format=interactive"
></iframe>
</div>另外，您可以在下面检查小提琴，
https://jsfiddle.net/qtro2Lz5/
对于这个谷歌电子表格发布的图表，我也面临着这个问题。顺便说一句，你的标题具有误导性，这不是谷歌图表，这是谷歌的另一个不同产品，用于创建真正合适的网页图表，它也可以响应，也可以使用电子表格数据。
回到问题，"Google 电子表格发布的图表"内容本身是没有响应的，它不是关于如何让 iframe 本身具有响应性。
Iframe可以响应，但我们不能修改已发布的Google电子表格中的图表内容以响应式，afaik。
我已经尝试了一些这样的技巧，它仅适用于视频和一些响应式内容网站。
http://jsfiddle.net/marhensa/g9op54wx/
还有其他一些像这样的巧妙技巧
https://codepen.io/alxfyv/pen/QEjEbp
但问题是iframe内容也必须是响应式的。
如果您只是希望它工作并且非常简单，请不要使用 iframe，使用简单的图像响应式，只需将已发布的 Google 电子表格图表网址的末尾从格式=交互式更改为格式=图像
可悲的是，解决这个问题的正确方法只是缩放，就像您在问题中所说的转换/缩放它一样。如果包装器的内容没有响应，并且您希望像这样动态调整其大小(文本也会变小( 记录示例，然后缩放它。顺便说一下，该示例是一个HTML文本和一些图形页面，它在缩放时的行为类似于SVG/图像文件。
解释如下： https://css-tricks.com/scaled-proportional-blocks-with-css-and-javascript
同样在 Angular 中完成：https://stackblitz.com/edit/angular-vagpoq
编辑：如果您可以接受缩放和较小的文本/细线，则工作解决方案是在HTML头部分中使用此JS + JQuery缩放方法，这是yazzz在这里写的，在该链接中向她/他致敬，而不是在这里。
<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