Question

我使用VS2010 / C＃开发一个ASP.NET Web应用程序，我为我的页面使用了一个大背景图像（它是1400x1100），我希望这个背景在所有分辨率中居中并适合屏幕，例如，如果分辨率为1280x1024，图像宽度应该适合这个较小的宽度，它也应该始终居中（水平），我该如何实现呢？

感谢

Answer 1

一个简单的想法，用javascript ...

<div style="position:fixed;z-index:2;">
 content here
</div>

<div style="position:fixed;top:0;left:0;width:100%;height:100%;z-index:1;">
    <img src="/img/YourBigImage.jpg" height="100%" width="100%" />
</div>

我的想法是将一个div放在另一个div上。背景div设置为整页，图像设置为适合此大小，使用100％作为高度和宽度。我测试它并为我工作，但我不知道你的内容发生了什么，如果内容太大或太复杂，背景div将如何适合。

Answer 2

使用纯CSS可以调整背景图像的大小，但需要browser supporting CSS3 - 简而言之，所有“现代”浏览器加上IE9及更高版本，这意味着IE8或更低版本没有纯粹的CSS方式。

要拥有包含IE8的跨浏览器解决方案，你必须使用JavaScript ..使用jQuery你已经有了很多可用的插件，其中一个看起来就像你需要的是：

jQuery Easy Background Resize by J.P. Given

Answer 3

您可以使用CSS 3媒体查询进行操作

代码可以这样：

@media screen and (min-width: 1024px){

.div{background:url(''); width:###px;}


}
@media screen and (max-width:1023px){

.div{background:url(''); width:###px;}

}

并且可以在所有浏览器中使用它，您可以使用jquery库来支持所有浏览器

在ASP.NET页面中居中大图像

3 个答案: