css - 缩小/缩小iframe以适应屏幕尺寸

我已就此主题进行了大量研究，但未能找到解决方案。所以我不确定我是否有可能做到这一点。

我想要实现的目标：

我想知道是否可以将缩放 iframe到100％的屏幕宽度，同时保留宽高比。 注意：按比例，我不是说，宽度：100％。我在谈论变换比例函数的作用。

我想在1920x1080px的iframe中拖动一个元素，但即使屏幕分辨率是500px，他们仍然会看到＆＃34;缩小＆＃34; iframe的100％宽度的版本。然后，当我在iframe中获取拖动元素的位置时，我希望它相对于1920px，而不是＆＃34;缩放＆＃34;出版本，这些可能是分开的吗？

不确定这是否可行，我觉得很难解释。所以我制作了一张图片进行演示。

我已经尝试了用于保持比率的img方法和padding-top方法。 这些方法起初似乎可以解决这个问题，但它们不会缩放＆＃34;，＆＃34;缩小＆＃34;元素，他们只是调整它。我想缩放元素，使其适合100％宽度。

它只需要在现代浏览器中工作。

是否有任何类型的css / javascript解决方案？