页面缩放布局控制

页面缩放影响到布局有很多种情况，在此仅记录我遇到过的一种情况：

自己在做业面过程总，经常遇到一个问题：

页面控件需要与背景图片对应上，例如下图所示：

 

 

 

 

 

 

图中显示为背景图片，现欲把text框与图片中的text位置对应。

这是一个登录页面，因此开始的时候我设置了该图片为登录页面的背景图，另外用图片边缘色做页面的背景色。输入框控件则放置在div中，通过设置margin使其和图片相应位置对应。浏览可以达到效果，可是如果此时缩放页面（ctrl+鼠标滚动）就会出现位移，完全对应不上。如图：

 

 

 

 

 

 

 

 

 

对于此问题，经过尝试，我的解决办法是，将要覆盖的图片部分和文本框放在一个容器（div）中，作为一个整体。即，将文本框放入div中，根据图片大小设置div大小，并将div 的背景设置为该图片，然后调整文本框在div中的位置直到对应上。

进行了这样的“捆绑”后，再对网页缩放，就不会出现上述文本框与图片偏移的问题了，他们将会作为一个整体同比例缩放。如图：