背景图像太大

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

你可以简单地做:

背景大小:100%100%;

这将使背景图像保持100%拉伸到当前容器的大小.因此,如果它在体内,它将填充页面的整个背景.