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

用例

我正在用谷歌表单进行一项调查。调查结果汇总在谷歌表格中。我有一系列随着新结果的出现而动态更新的图表。我有一个Squarespace网站，我想在那里发布图表。我可以用一个代码块嵌入图表，在这里我复制并粘贴了由Google Sheets生成的iframe嵌入代码

问题

您可能知道，iFrame没有完全响应。我看过许多文章，其中介绍了使iframe具有响应性的各种技术。我从所有人那里学到的例子是，使用YouTube视频播放器作为例子，使它们能够为完全响应的网站进行缩放。我已经遵循了这些示例，并且尽我所能，我已经得到了iframe来响应视口的大小，但不是iframe内的图像

我咨询了两位经营网络开发商店的朋友，但我不能要求太多帮助，因为我会要求他们免费工作，我也不会要求我的朋友免费工作

链接到JSFIDLE

这是我的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>

.embed容器{
位置：相对位置；
垫底：56.25%；
身高：0；
溢出：隐藏；
最大宽度：100%；
边界：0；
}
.嵌入容器iframe，
.嵌入容器对象，
.嵌入容器嵌入{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
边界：0；
变换：比例（1.00）；
转换源：（）
}

我的代码注释

我正在使用一种我在多个博客中看到过的方法，基本代码来自。我的一个朋友向我指出了这个问题，我从中得到了

转换的想法：scale

，你可以在

.embed container iframe

中看到<代码>变换：缩放似乎让我在这方面取得了一些进展。当我将代码调整为

transform:scale（0.25）

时，它会缩小我想要的图形，但这对于我试图实现的目标来说太不雅观了。现在，我的CSS使用比例的绝对值，而不是使用iframe的边作为参考点（我认为这就是我需要实现的）

我想要的结果

我希望iframe内的图像相对于iframe的边缘缩小。Squarespace将根据视口自动重新排列代码块的位置。如果我能找到一种方法将

变换：缩放

绑定到iframe的边缘，我想这会满足我的需要

限制

我希望在没有任何JS的情况下实现这一点，但如果需要的话，我是灵活的，因为我可以在Squarespace代码块中运行

。如果我的PHP技能足够强大，我可能会用谷歌的图表可视化套件手工编写图表，但我没有时间学习到那种熟练程度

---

我很高兴听到我想做的事情因为谷歌表单的限制而无法完成，但我不知道我是否相信这一点。我可以根据绝对值来缩放图像，我希望有人能找到一种方法来帮助我根据iframe的大小在iframe内缩放图像。

我认为不可能影响iframe in页面的CSS。您必须将响应CSS添加到您试图嵌入的页面中。因为这是一张谷歌生成的图片，看起来你不太可能访问它。您可以尝试做的是下载图像并将其作为图像而不是iframe放置在square space站点上

---

我不确定图像的数据是否是动态的，这样可能会影响您的操作。你有没有想过四处寻找其他的绘图服务？可能会有一些东西与google sheets联系在一起，或者如果您对javascript了解得足够多，您可以使用google api构建自己的图形。

对不起，但我认为这是不可能的，因为这里的问题的图像是在一个iframe，所以我们不能样式，如果你能给样式，然后plz给内联样式的图像像最大宽度：100%；高度：自动；此外，在“移动视图”中，您需要为iframe指定最小高度，否则图像将在小型设备中显示。@tec4。谢谢你的回复。数据是非常动态的，我正在尝试创建一个网页，当页面加载时，该网页将始终拉入更新的数字。@KevinTaylor是的，在这种情况下，您可能需要深入研究一些Javascript或找到一个服务，将其与google sheets绑定，并允许您嵌入该服务的动态图形表单。@pnuts您将是自愿提供帮助的陌生人。我提到的那些朋友，如果我过于频繁地向他们寻求帮助，最终可能会使我失去对他们的欢迎。