较小分辨率的背景图像

Question

我有一个x1600宽的大背景图片。它完全适合1600x900的屏幕。但是当我将其更改为1280x720时，会修剪正确的背景图像。使居中的幻灯片向右对齐。

如何在左侧和右侧修剪它，同时保持幻灯片放映为中心。

Answer 1

background-position: center center;

这会将背景置于中间，如果屏幕不够大，那么它将在所有需要的边上修剪。

但请记住，我的1920x1200屏幕会出现空白边缘。

Answer 2

使用

background-position: center center;

使图像居中。

background-size: cover;

会将图像缩放到最大尺寸，以便它的宽度和高度都适合该区域，

background-size: contain;

将缩放背景图像，使其全部可见，

background-size: 100% 100%;

会将图像拉伸到区域的宽度和高度。

http://www.w3schools.com/cssref/css3_pr_background-size.asp

希望有所帮助！

编辑：为了与旧版浏览器兼容，请使用-moz-background-size，-webkit-background-size和-o-background-size指定相同的值。 请参阅background-size - MDN。