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

【问题标题】：Use CSS transforms or javascript to scale an element to fit its parent dynamically使用 CSS 转换或 javascript 来动态缩放元素以适应其父元素
【发布时间】：2012-10-21 03:53:16
【问题描述】：

我有一个页面，其中有一个由<div> 元素组成的轮子，当您单击一个按钮时，整个轮子都会旋转。

我通过使用本质上是绝对的 CSS 变换来实现此效果。但是轮子很大，在我的高清显示器上看起来不错，但较小的屏幕会被切掉边缘。我不能像使用普通布局那样使用 % 宽度，我需要以与大多数浏览器缩放功能相同的方式缩小整个页面。

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

我知道我可以在包装 div 上使用-browser-transform: scale(amt); 来获得我想要的效果，但是我无法找到动态的方法。如果我将比例设置为 0.5，无论屏幕如何，它都会是 0.5。我希望轮子的边缘距离任何屏幕上的屏幕边缘只有几个像素。我知道媒体查询可以用来解决这个问题，但它们要么让我得到不太理想的结果，要么需要太多不同的查询。必须有一种方法可以通过编程方式修改-browser-transform: scale(amt);，或者通过其他方式进行有限控制。

有什么想法吗？

【问题讨论】：

好吧，我在这个上得到了风滚草。没人知道吗？
你有车轮（部分）的绝对尺寸吗？如果您在问题中添加一个小的 + 工作示例，它会有所帮助，很难想象您的代码是什么样的。 - 无论如何，按照我的阅读方式，如果您有固定的车轮尺寸和固定的（但预先不知道）浏览器尺寸，您将需要 JavaScript 来确定比例。
你是说要根据视口大小计算amt？
似乎最直接的方法是使用 JS 在页面加载时设置样式属性，一旦它具有窗口大小。如果您可以使用 JS，请发表评论或更新您的问题；这很容易做到。
问题是我在 JS 中找不到正确的方法。因为-browser-transform: scale(amt); 是专有的（每个浏览器都不同）我找不到用JS 修改的正确方法。

标签： javascript css css-transforms

【解决方案1】：

您是否尝试过在 css 中使用媒体查询来定位不同的屏幕。例如，在您的 css 文件中有一个媒体查询，指出在 320 - 480 像素的宽度上，包含此轮子的 div 被缩放到 50%。然后在 481-768 像素处，将 div 容器缩放到 75%。从 769 像素开始，div 被缩放到 100%。

这应该可以帮助您在不同的屏幕尺寸下实现所需的动态缩放。如果你想要一个演示，我很乐意制作一个 jsfiddle 来展示它。

【讨论】：

虽然它在技术上可行，但我需要许多媒体查询来考虑各种屏幕尺寸，同时仍将外观保持在可接受的偏差范围内。请记住，并不是每个人都在浏览器填满屏幕的情况下进行查看，可能的尺寸数量非常多。简而言之，过多的冗余，媒体查询并不是一个优雅的解决方案。
不一定，例如，对 1920x1080 显示器进行分屏会将其降低到 1920x540，这将在 (min-width: 481px) 和 (max-width: 768px) 的范围内。如果你使用范围，那么你不需要那么多。首先使用谷歌分析从一个基本网站开始一周左右，看看人们访问该网站的分辨率，并主要针对这些进行设计。或者，如果您不想等待，请针对最常见的尺寸进行设计，例如 320x480、800x480、960x640、1024x768、1600x900、1920x1080。并且不要忘记为每个屏幕尺寸模拟和编写一个新的小数并不是很多工作。
我想让你成为一个 jsfiddle 为你做这件事，除了我在我的回复和你之前的评论中列出的尺寸之外，你还有其他尺寸吗？您是否对已经创建的轮子有兴趣？
我不需要概念证明，我知道它会在一定程度上起作用，但我正在寻找更优雅的解决方案。
不是为了概念证明，我想实际为你做，因为我觉得这是最优雅的解决方案，如果你选择不使用它，我可以接受。此外，这对我来说是使用媒体查询和 css 转换的好机会。我愿意为你做。