Question

在所有浏览器中，将背景图像设置为居中且100％（使其填充屏幕，但保持宽高比）的最佳做法是什么？

Answer 1

到目前为止，我设法做出的最佳解决方案如下：

//CSS
<style type="text/css">
   body {
       margin:0; padding:0;
   }
   html, body, #bg {
       height:100%;
       width:100%;
   }
   #bg {
       position:absolute; 
       left:0;
       right:0;
       bottom:0;
       top:0;
       overflow:hidden;
       z-index:0;
   }
   #bg img {
       width:100%;
       min-width:100%;
       min-height:100%;
   }
   #content {
       z-index:1;
   }
</style>

//HTML
<body>
<div id="bg">
   <img style="display:block;" src="bgimage.jpg">
</div>
<div id="content">
   //Rest of content
</div>
</body>

这可能是最好的方法吗？有人看到这样做有什么问题吗？

谢谢你的时间！

Answer 2

最佳做法是不做你想做的事。

通过指定100％，您将拉伸（从而扭曲）图像。

拥有简单，集中的背景的最佳方式是这样的：

body {
    background-image:url(Images/MyBG.png);
    background-position:center top;
    background-repeat:no-repeat
}

修改

现在，您可以通过指定与分辨率相关的样式表来定位不同的分辨率并使用不同的背景图像，具体取决于大小。您可以使用单独的样式表来定义一个背景元素，每个背景元素包含不同的文件。

<link rel="stylesheet" media="screen and (min-device-width: 800px)" href="800.css" />

请参阅：http://css-tricks.com/resolution-specific-stylesheets/

或W3C CSS media query spec。

Answer 3

挑选一篇旧帖子，因为有一种新方法可以通过良好的浏览器支持来实现。

像这样使用background-image：

background-size:cover;
background-position:center;

这不会破坏图像的比例，但会尽可能地将其缩放，从而不会显示任何黑条（或背景中的任何内容）。

浏览器支持几乎是完美的，您可以在Can I use it?上看到。 Opera Mini可能是一个问题，但很快就会被Vivaldi取代浏览器。

总之，我认为这绝对是最佳选择，因为它是迄今为止最干净，最可靠的解决方案，并且很容易用JS进行编辑。

Answer 4

这是关于实现这种外观的两种方法的优秀文章：

http://css-tricks.com/perfect-full-page-background-image/

Answer 5

我不知道如何通过将其设置为背景图像来实现此目的。但是，您可以拥有绝对定位的图像

<div style="position:absolute; left:0;right:0;bottom:0;top:0;display:table;vertical-align:middle;text-align:center">
<img style="max-width:100%; max-height:100%" />
</div>

Answer 6

您可以使用CSS3 background-size property，但我不确定它的支持程度。我认为他们中的大多数都使用前缀：

-o-background-size
-webkit-background-size 
-khtml-background-size

所有浏览器中的背景图像居中且100％

6 个答案: