HTML/CSS 缩放
缩放 HTML 元素时遇到一些困难。在 FF 或 Chrome 中，看一下（非常非常简单的小代码）：
从下拉列表中选择 150%。黑白渐变框将缩放至其原始大小的 150%。现在它已缩放，请注意水平滚动条出现，垂直滚动条扩展以适应新的、更大的缩放高度和宽度。
现在从 150% 切换到 50%。渐变框确实缩放到 50%，但请注意（垂直）滚动条不会收缩以适应新的、较小的缩放高度。相反，渐变框下方有一堆空白区域。
为什么浏览器刷新滚动条时缩放比例大于 100%，但不小于 100%？如何在小于 100% 的情况下获得与在大于 100% 的情况下相同的行为？我不想要这个空白。
Having some difficulties with zooming HTML elements. In FF or Chrome, take a look at (very, very simple, small code):
From the drop down, select 150%. The black and white gradient box will scale to 150% of its origin size. Now that it's scaled, notice that the horizontal scroll bar appears and the vertical scroll bar expands to accommodate the new, larger, scaled height and width.
Now switch from 150% to 50%. The gradient box does indeed scale to 50%, but notice that the (vertical) scroll bar does not contract to accommodate the new, smaller, scaled height. Instead, there's a bunch of empty white space under the gradient box.
How come browsers refresh the scroll bars for scaling greater than 100%, but not less than 100%? How can I get the same behavior for the less than 100% as I do with greater than 100%? I don't want this white space.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
我对正在发生的事情有一些了解：
缩放仅影响渐变框，而不影响其内部的容器 div。因此，当您将框缩放到 150% 时，框现在相对大于其内部容器 div 的大小（容器 div 始终为 496x250），因此它会放置滚动条。
另一方面，当你把它变小时，渐变框就比它里面的容器 div 小，所以就不需要滚动条了。
可能有几种不同的方法来处理这个问题。主要问题是您没有处理容器 div 的大小调整/缩放。
I have some insight into what is happening:
The scaling affects only the gradient box, but not the container div which it is inside. So when you scale the box to 150%, the box is now comparitively bigger than the size of the container div it's inside (the container div is always 496x250), so it places scrollbars.
On the other hand, when you make it smaller, then the gradient box is smaller than the container div its inside, so there is no need for scrollbars.
There could be a few different ways to handle this. The main issue is that you are not handling the resizing/scaling of the container div.
修改了小提琴中的一些内容。请检查这是否是您想要的：
http://jsfiddle.net/92wHQ/7/
然后滚动条实际上基于 100% 及更大的尺寸。请注意 100% 滚动条和 50% 滚动条具有相同的“大小”，而 150% 滚动条是唯一一次变小。
modified something in the fiddle. please check if this is what you desire:
http://jsfiddle.net/92wHQ/7/
then the scrollbars are actually based on the 100% dimensions and greater. notice how the 100% scrollbar and 50% scrollbar have the same "size" while doing 150% is the only time it turns smaller.