Question

用例

我正在使用Google Forms进行调查。调查结果汇总在Google表格中。我有一系列随着新结果而动态更新的图形。我有一个Squarespace网站，我想在其中发布图表。我可以在图表上嵌入代码块，然后在其中复制并粘贴Google表格生成的iframe嵌入代码。

问题

您可能知道，iframe无法完全响应。我看过许多文章，介绍了各种使iframe响应式技术的技术。我从所有人那里学到的例子都是使用YouTube视频播放器作为使它们可扩展为完全响应的网站的示例。我已经按照示例操作，并且可以告诉我，iframe可以响应视口的大小，但不能响应iframe内的图像。

我已经咨询了两个经营Web开发商店的朋友，但是我不能要求太多帮助，因为我会要求他们免费工作，而且我也不会要求我的朋友提供免费工作。 / p>

链接到JSFiddle

https://jsfiddle.net/ArgyleAnalytics/z4rcv7hp/4/

这是我的HTML

<div class='embed-container'>
    <iframe src='https://docs.google.com/spreadsheets/d/e/2PACX-1vRPFtRq4MyzyU-MgDlL3duebxBNAHL6ySq2e_jatydzOseVyAzAHuoSA6VXAcalDkYMG1litTyKPkEn/pubchart?oid=501231490&format=image' scrolling="no" seamless frameboarder="0">
    </iframe>
</div>

这是我的CSS

<style>.embed-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    max-width: 100%;
    border: 0;
    }

.embed-container iframe,
.embed-container object,
.embed-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    transform: scale(1.00);
    transform-orgin: ()
    }
</style>

我的代码注释

我使用的方法已经在多个博客中使用，其基本代码来自http://embedresponsively.com。我的一位朋友将我指向了这个SO线程，在那里我有了transform: scale中看到的.embed-container iframe的想法。 transform: scale似乎让我参与其中。当我将代码调整为transform: scale(0.25)时，它会缩小我想要的图形，但这对于我要实现的目标来说太微不足道了。现在，我的CSS使用的是比例尺的绝对值，而不是使用iframe的边缘作为参考点（我认为这是我需要实现的目标）。

我期望的结果

我希望iframe内的图像相对于iframe的边缘缩小。 Squarespace会根据视口自动重新排列代码块的位置。如果我能找到将transform: scale绑定到iframe边缘的方法，我认为这将满足我的需求。

限制

我想在不使用任何JS的情况下实现这一目标，但是我很灵活，因为我可以在Squarespace代码块中运行<scripts>。如果我的PHP技能足够强大，我可能只会用Google的Chart Visualization套件手工编写图形，但是我没有时间研究这种熟练程度。

我很高兴听到我想做的事情由于Google表格的局限性而无法完成，但是我不知道我买了那个。我可以根据绝对值缩放图像，希望有人可以找到一种方法，以根据iframe的大小在iframe中缩放图像。

Answer 1

我认为不可能影响iframed页面的CSS。您必须将响应式CSS添加到您要嵌入的页面。由于它是由google生成的图像，因此您似乎无权执行此操作。您可以尝试做的就是下载图像并将其作为图像而不是iframe放置在正方形空间站点上。

不确定图像的数据是否是动态的，这可能会影响您的操作。您是否考虑过寻找其他图形服务？可能有一些东西可以绑定到Google表格中，或者如果您足够了解JavaScript，则可以使用googles api构建自己的图形。

如何使用CSS在iframe中缩放图像

1 个答案: