html - 将图像的侧面裁剪为屏幕大小并居中对齐

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。