background-image - 将 CSS 与背景图片/登录一起使用

Question

目前我正在尝试为基于网络的应用程序编辑登录屏幕。截至目前，我在页面上的特定位置有登录提示(用户和密码)，以便它与背景图像相对应。现在这张图片设置为 1024x768。

我想知道的是，有没有办法让背景根据用户自己的分辨率自动缩放，同时让登录显示在正确的位置？我不确定这是否可行，但认为有人可能会提供一些建议。

Answer 1

我做了一个可以派上用场的 jsFiddle 解决方案: Click here to see background-resizing at work

它适用于 jQuery，我对大部分代码进行了注释，以便您了解它的工作原理。您比较图像和浏览器窗口的纵横比，查看差异，然后根据纵横比的比较方式调整宽度或高度。 CSS 也值得一看。

我在 Firefox 和 IE(7/8) 中测试过它，但是 jsFiddle 调整大小在 IE 中有点错误。

祝你好运!

更新:

I've made an updated jsFiddle here.

在这种情况下，消息框(在您的例子中是登录框)是绝对定位的，在顶部和右侧有百分比偏移。我还给了它百分比宽度/高度，尽管这可能不是必需的/不需要的。但是您可以调整它以查看盒子在不同窗口大小下的行为。