使用css将小图像显示为全屏宽度。

Question

我有以下css：

.image{
background: url('image.png') no-repeat;
width:100%
}

我的图片尺寸很小，我希望这张图片能够全屏拉伸并重复播放。请帮我解决这个问题。

感谢。

Answer 1

使用background-size: cover; ...但请记住，如果它是一张小图片 - 那么通过拉伸它可能会导致背景质量不佳。

<强> DEMO

CSS

div {
    background: url('http://lorempixel.com/400/200/food') no-repeat;
    width:100%;
    height: 100vh;
    background-size: cover;
}