Как масштабировать изображение внутри iframe с помощью css

Случай использования

У меня есть опрос, который я провожу с помощью Google Forms. Результаты опроса агрегируются в Google Sheets. У меня есть ряд графиков, которые динамически обновляются по мере поступления новых результатов. У меня есть веб-сайт Squarespace, на котором я хочу опубликовать графики. Я могу встроить диаграммы с блоком кода, в который я копирую и вставляю код встраивания iframe, созданный Google Sheets.

Проблема

Как вы, наверное, знаете, фреймы не полностью адаптивны. Я видел ряд статей с различными методами создания адаптивного 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 в качестве точки отсчета (я думаю, это то, чего мне нужно добиться).