使用CSS转换或javascript动态缩放元素以适应其父元素

我有一个页面，其中有一个

元素的轮子，当你点击一个按钮时，整个轮子都会旋转

我通过使用CSS转换实现了这一效果，CSS转换本质上是绝对的。然而，轮子非常大，在我的高清显示器上看起来很漂亮，但是较小的屏幕边缘会被切掉。我不能像正常布局那样使用%width，我需要的是以大多数浏览器缩放功能的方式缩小整个页面

就我自己而言，我知道ctr+mouseWheel会缩小页面，这样我就可以看到整个页面，但我不能期望其他人这样做

我知道我可以使用

-浏览器转换：比例（amt）来获得我想要的效果，但是我无法找到一种动态实现的方法。如果我将刻度设置为.5，无论屏幕如何，它都将是.5。我希望轮子的边缘与任何屏幕上的屏幕边缘仅相差几个像素。我知道媒体查询可以帮助解决这个问题，但它们要么给我留下不理想的结果，要么需要太多不同的查询。必须有一种方法来修改
-浏览器转换：缩放（amt）以编程方式，或以其他方式进行有限控制

有什么想法吗？
您是否尝试过使用css中的媒体查询来针对不同的屏幕。例如，在css文件中有一个媒体查询，该查询表示在320-480像素的宽度下，包含此控制盘的div将缩放到50%。然后在481-768像素处，div容器被缩放到75%。从769像素增加到100%

这将帮助您在不同的屏幕大小下实现所需的动态缩放。如果您想要一个演示，我很乐意制作一个JSFIDLE来展示它。
好吧，这一个上有风滚草。没人知道？你有轮子（部分）的绝对尺寸吗？如果您在问题中添加一个小的+工作示例，这会有所帮助，您的代码看起来有点难想象。-在任何情况下，我读它的方式，如果你有一个固定的车轮大小和一个固定的（但未知的前面）浏览器大小您需要JavaScript来确定比例。您是说要根据视口大小计算
amt
？最简单的方法似乎是在页面加载时使用JS设置样式属性，一旦页面加载具有窗口大小。如果JS是你可以使用的东西，请发表评论或更新你的问题；这很容易做到，问题是我在JS中找不到正确的方法。因为
-浏览器变换：比例（amt）
是专有的（每个浏览器都不同），我找不到用JS进行修改的正确方法。虽然它在技术上可行，但我需要许多媒体查询来解释各种屏幕大小，同时仍将外观保持在可接受的偏差范围内。请记住，并不是每个人都是在浏览器充满屏幕的情况下观看的，可能的尺寸数量太多了。简言之，由于冗余太多，媒体查询不是一个优雅的解决方案。例如，不一定会将1920x1080监视器拆分为1920x540，其范围为（最小宽度：481px）和（最大宽度：768px）。如果你使用范围，那么你不需要那么多。首先，用谷歌分析（GoogleAnalytics）从一个基本网站开始一周左右的时间，看看人们访问该网站的分辨率，然后主要针对这些分辨率进行设计。或者，如果您不想等待，请设计最常见的，如320x480、800x480、960x640、1024x768、1600x900、1920x1080。别忘了，模拟并为每个屏幕大小编写一个新的小数并不需要太多的工作。我想让你成为一个JSFIDLE，为你这样做，除了我在上面的回复和你之前的评论中列出的尺寸之外，你还有其他的尺寸吗？你是否有一个已经创建的轮子？我不需要概念证明，我知道它在一定程度上会起作用，但我正在寻找一个更优雅的解决方案。不是概念证明，我想为你做这件事，因为我觉得这是最优雅的解决方案，如果你选择不使用它，我很乐意。此外，我有机会使用媒体查询和css转换。我愿意为你做这件事。