Question

我希望<img>标记在加载时完全是浏览器窗口宽度的100％，但是当窗口调整大小（向下移动到移动宽度）时，图像会保留在窗口的死角中，仍然是相同的尺寸和边缘被切断。你能用css做到这一点吗？如果是这样，怎么样？

Answer 1

到目前为止，最简单的方法是设置div background-image和background-position: center，这样可以达到预期的效果。

div {
    background: url([imageurl]) no-repeat top center;
    width: 100%;
    height: [imageheight];
}

Demo

Answer 2

我强烈建议在这些场合使用background-size: cover。

html { 
   background: url(images/bg.jpg) no-repeat center center fixed; 
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
}

（取自here）

用css将图像保持在中间

2 个答案: