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

问题描述

用例

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

问题

您可能知道，iframe 没有完全响应。我看过许多文章，其中包含使 iframe 响应的各种技术。我从所有使用 YouTube 视频播放器的示例中了解到，该示例使它们可扩展以适应完全响应的网站。我已经按照示例进行操作，并且据我所知，我已经让 iframe 响应视口的大小，而不是 iframe 内的图像。

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

链接到 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 将根据视口自动重新排列代码块的位置。如果我能找到一种方法将 iframe 绑定transform: scale到 iframe 的边缘，我认为这将满足我的需求。

限制

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

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

标签： cssiframegoogle-sheetsembedsquarespace

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

问题描述

解决方案

推荐阅读