HTML/CSS缩放

Question

在缩放HTML元素时遇到一些困难。在FF或Chrome，看一看（非常非常简单，小型代码）：

http://jsfiddle.net/92wHQ/4/

从下拉，选择150％。黑白渐变盒将缩放至其原始尺寸的150％。现在缩放后，请注意水平滚动条出现，并且垂直滚动条展开以适应新的，更大，缩放的高度和宽度。

现在从150％切换到50％。渐变框确实可以缩放到50％，但请注意（垂直）滚动条不会收缩以适应新的更小的缩放高度。相反，渐变框下面有一堆空的空白区域。

为什么浏览器刷新滚动条的缩放比例大于100％，但不小于100％？我如何以低于100％的比例获得相同的行为，因为我的比例大于100％？我不想要这个空白空间。

Answer 1

我有了一些深入了解正在发生的事情：

缩放只影响渐变框中，但不是div容器，它里面。所以当你将盒子缩放到150％时，盒子现在比它内部的容器div大（容器div总是496x250），所以它放置了滚动条。

另一方面，当你把它做得更小时，那么渐变盒比内部的容器div更小，所以不需要滚动条。

可能有几种不同的方法来处理这个问题。主要问题是你没有处理容器div的大小/缩放比例。

Answer 2

在小提琴中修改了一些东西。请检查，如果这是你的愿望：

http://jsfiddle.net/92wHQ/7/

则滚动条实际上​​是基于100点％的尺寸和更大。注意100％滚动条和50％滚动条如何具有相同的“大小”，而150％是唯一一次变小的时间。