HTML/CSS缩放

Question

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

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

从下拉列表中选择150%。黑白渐变框将按其原始大小的150%进行缩放。现在它已经缩放，注意水平滚动条出现，并且垂直滚动条扩展以适应新的、更大的、缩放后的高度和宽度。

现在将其从150%切换到50%。渐变框确实按50%进行缩放，但请注意（垂直）滚动条不会因为新的、更小的、缩放后的高度而收缩。相反，渐变框下方有一堆空白空间。

为什么浏览器对于大于100%的缩放会刷新滚动条，但小于100%的缩放不会呢？我如何获得与大于100%相同的行为来处理小于100%的缩放？我不想要这个空白空间。

- user979672

Answer 1

我在这个fiddle中修改了一些内容，请检查是否符合您的要求:

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

然后滚动条实际上是基于100%尺寸和更大的尺寸。请注意，当100%滚动条和50%滚动条具有相同的“大小”时，只有进行150%时它才会变小。

- Joseph

---

这个运行得非常好！我已经花了几个小时来理解错在哪里。您能解释一下将边距设置为自动是如何修复的吗？ - vaidik

Answer 2

我对所发生的情况有一些见解：

缩放只影响渐变框，而不影响它所在的容器div。因此，当您将框缩放到150％时，该框现在相对于其内部的容器div（容器div始终为496x250）更大，因此会出现滚动条。

另一方面，当您将其缩小时，渐变框比其内部的容器div更小，因此无需滚动条。

处理这个问题可能有几种不同的方法。主要问题是您没有处理容器div的调整/缩放。

- ankit

---

然而，当你将它缩小时，注意到水平滚动条允许你滚动太远——就好像渐变框的高度从未改变过一样。 - user979672