css - 添加大内容而不在css中重复图像时如何拉伸背景图像

Question

我想在 html 的内容增加时拉伸图像。并且每当内容增加时，就会自动拉伸背景图像，而无需在 css 中重复。在 Html 页面中。

Answer 1

这是我避免拉伸的建议：

div {
background-image: url(http://placekitten.com/200/300);
background-repeat: no-repeat;
height: auto;
width: 100%;
background-position: 50% 0;
background-size: 100%;
}

http://jsfiddle.net/Riskbreaker/mx8rr/1/

Answer 2

看一下这个！

这是我的CSS：

div {
    background-image: url(http://placekitten.com/200/300);
    background-repeat: no-repeat;
    min-width: 200px;
    min-height: 300px;
    background-size: 100% 100%;
}

background-size: cover;也会起作用，但效果略有不同。

Answer 3

我们可以在添加大内容时拉伸背景图像而无需在 css 中重复图像

请尝试下一个：

background-size: cover;

或者

background-size: contain;