将图像裁剪成与屏幕大小和中心对齐的图像

Question

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

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

简单地将图像的宽度设置为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。