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

Question

用例

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

问题

您可能知道，iframe 并不是完全响应式的。我看过许多文章，其中介绍了使 iframe 具有响应能力的各种技术。我从所有人那里学到的示例都使用 YouTube 视频播放器作为示例，使它们可以针对完全响应的网站进行扩展。我已经按照这些示例进行操作，并且几乎可以说我已经让 iframe 响应视口(viewport)的大小，而不是 iframe 内的图像。

我咨询了两个经营网络开发商店的 friend ，但我不能要求太多帮助，因为我会要求他们免费工作，而且我不会要求我的 friend 免费工作。

链接到 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 .我的一位 friend 向我指出了这个 SO 线程，我从中得到了 transform: scale 的想法。你在 .embed-container iframe 中看到. transform: scale似乎让我参与其中。当我将代码调整为 transform: scale(0.25) 时它缩小了我想要的图形，但这对于我想要实现的目标来说太不优雅了。现在，我的 CSS 使用比例的绝对值，而不是使用 iframe 的边缘作为引用点(我认为这是我需要实现的)。

我想要的结果

我希望 iframe 内的图像相对于 iframe 的边缘缩小。 Squarespace 会根据视口(viewport)自动重新排列代码块的位置。如果我能想出一种方法来绑定(bind) transform: scale到 iframe 的边缘，我认为这会给我我需要的东西。

限制

我想在没有任何 JS 的情况下实现这一点，但如果这是我需要的，我会很灵活，因为我可以运行 <scripts>在 Squarespace 代码块内。如果我的 PHP 技能足够强，我可能会用 Google 的图表可视化套件手工编写我的图表，但我没有时间学习到那种熟练程度。

我可以接受由于 Google 表格的限制而无法完成我想做的事情，但我不知道我是否买账。我可以根据绝对值缩放图像，我希望有人能找到一种方法来帮助我根据 iframe 的大小在 iframe 中缩放我的图像。

Answer 1

我认为不可能影响页面中 iframed 的 CSS。您必须将响应式 CSS 添加到您尝试嵌入的页面。由于它是谷歌生成的图像，因此您似乎无法访问它。您可以尝试做的是下载图像并将其作为图像而不是 iframe 放置在方形空间网站上。

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