裁剪图像的侧面到屏幕的大小，并将其居中对齐

Question

我有一个图像沿着我的网站的宽度运行。它包含在宽度设置为100%的div中。图片本身的宽度为2560px。

我希望图像与浏览器视图中的页面宽度相同，因为目前它使页面更长。

简单地将图像的宽度设置为100%，会使其更小，不成比例。

搜索表明可以将max-width设置为100%，但这只会切断图像的末端。

是否有一种方法来保持中心对齐，即裁剪图像的两端，使其始终保持居中?

许多谢谢。

Answer 1

您应该使用background-image来设置它。

这将允许你很容易地居中，像这样:

body{
background: url("path/to/image") no-repeat fixed center top; 
}

center -图像居中

top -垂直调整图像

no-repeat -确保背景不重复

fixed -跟随你滚动

您可能不需要所有这些属性，您需要的是中心

Answer 2

我想你要找的是这个:

http://jsfiddle.net/promatik/hFsYv/

HTML:

<div id="bg-div"></div>

CSS:

#bg-div {
    position: fixed;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-attachment:fixed;
    background-position: center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

这将把背景定位在div的中心，并裁剪它以最佳方式填充div