css div + background-image

Question

我想知道我在使用背景图片属性方面做错了什么，我希望图片始终以其全尺寸显示完全调整到其育儿div（无论什么样的决定它显示在上面），这是我到目前为止所做的事情，我完全清楚问题不是那么复杂，但我无法解决它！谢谢你的帮助。

＆＃13;

＆＃13;

body {
    margin: 0px;
}

header {
    height: 200px;
    background-image: url(http://kingofwallpapers.com/picture/picture-008.jpg);
    background-size: cover;
}

＆＃13;

<header>
</header>

＆＃13;

＆＃13;

＆＃13;

Answer 1

你很亲密。您只需将background-size设置为包含即可。 contain将背景图像缩放为父级尺寸（不拉伸，即最小，宽度或高度。）

background-repeat只是为了不重复背景

body {
    margin: 0px;
}

header {
    height: 200px;
    background-image: url(http://kingofwallpapers.com/picture/picture-008.jpg);
    background-size: contain;
    /* background-size: 100% 100%; <- stretch fit to parent */
    background-repeat: no-repeat;
}

<header>
</header>

Answer 2

而不是

background-size: cover;

你应该使用：

background-size: 100% 100%;

所以我认为这段代码可以提供帮助：

body {
    margin: 0px;
}

header {
    height: 200px;
    background-image: url(http://kingofwallpapers.com/picture/picture-008.jpg);
    background-size: 100% 100%;
}

<header>
</header>