html - css div + 背景图像

Question

我想知道我在使用 background-image 属性方面做错了什么，我希望图片始终以其全尺寸显示，并根据其育儿 div 进行完美调整(无论它是哪种分辨率会显示)，这就是我到目前为止所要做的，我完全意识到问题并不那么复杂，但我就是无法解决它!感谢您的帮助。

body {
    margin: 0px;
}

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

<header>
</header>

Answer 1

你很接近。您只需将背景大小设置为包含即可。 contain 将背景图像缩放到父尺寸(不拉伸(stretch)，即最小的宽度或高度。)

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>