Question

我试图让我的背景图片始终保持100％的宽度，但它不起作用。使用我当前的代码，我得到了我想要的图片，但是有一堆不需要的死区（图片下方的所有黄色背景）。溢出选项无法解决此问题。

如果我省略固定的高度/宽度，那么图像由于某种原因呈现0x0大小;如果我使用background-size: cover，图像会变得太大，并且不再适合我的父容器

的jsfiddle： http://jsfiddle.net/CSS_Apprentice/z7bojmbn/1/

.mainpic {
    background-image: url('http://www.placehold.it/1922x1080');
    width: 1922px;
    height: 1080px;
    background-size: contain;
    max-width: 100%;
    max-height: 100%;
    background-repeat: no-repeat;
}

Answer 1

您可以这样做：

background-size：100％100％;

这样可以将背景图像拉伸100％到当前容器的大小。因此，如果它在体内，它将填充页面的整个背景。

Answer 2

您可能对cover声明感兴趣。

-webkit-background-size: cover;
   -moz-background-size: cover;
     -o-background-size: cover;
        background-size: cover;

背景图像太大

2 个答案: