问题
Currently I'm trying to edit a login screen for a web based application. As of now, I have the login prompt (user & password) at a particular place on page so that it corresponds with the background image. Right now this image is set to 1024x768.
What I was wondering, is there a way to have the background automatically scale depending on users own resolution while have the login appear at the correct location? I'm not sure if this is possible but thought someone might have some advice.
回答1:
I've made a jsFiddle solution that can come in handy: Click here to see background-resizing at work
It works with jQuery, and I've commented most code so you can understand how it works. You compare the aspect ratio of the image and the browserwindow, look at the difference and then resize the width or height, based on how the aspect ratio's are comparing. The css is also worth a look.
I tested it in Firefox and IE(7/8), but jsFiddle resizing is a bit buggy in IE.
Good luck!
Update:
I've made an updated jsFiddle here.
In this scenario, the message box (in your case the loginbox) is positioned absolute with percentual offset to the top and right. I also gave it percentual width/height, although that might not be neccesary/wanted. But you can tweak this to see how the box behaves with different window sizes.
来源：https://stackoverflow.com/questions/4017806/using-css-with-background-image-login