Question

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

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

简单地将图像的宽度设置为100％会使其变小并且不成比例。

搜索建议可以将max-width设置为100％，但这只会关闭图像的结尾。

有没有办法保持中心对齐，即裁剪图像的两端，使其始终保持居中？

非常感谢。

Answer 1

我想要的是这个：

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。

Answer 2

您应该使用background-image进行设置。

这样您就可以轻松地将其集中在一起：

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

center - 图像居中

top - 垂直调整图像

no-repeat - 确保背景不重复

fixed - 滚动时关注

您可能不希望所有这些属性，您正在寻找的属性是中心。

将图像的边缘裁剪为屏幕大小和中心对齐

2 个答案: