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

【问题标题】：How stretch background image when added large content without repeating image in css添加大内容而不在css中重复图像时如何拉伸背景图像
【发布时间】：2013-04-01 05:13:49
【问题描述】：

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

【问题讨论】：

github.com/danmillar/jquery-anystretch
Stretch and scale CSS background的可能重复

标签： css image dynamic

【解决方案1】：

Check this out!

这是我的 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; 也可以使用，但效果略有不同。

【讨论】：

另请参阅jsfiddle.net/zPdQh，了解一些动态使元素大小增加的javascript。

【解决方案2】：

这是我避免拉伸的建议：

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/

【讨论】：

我有一个关于背景图像的问题，我想当菜单文本增加时背景图像被拉伸，即图像的宽度应该增加而不使用重复 y。因为我使用的是哪个图像，所有 4 个角上都有子弹，所以看起来很糟糕。所以你有任何解决方案请给我..我尝试了很多..请帮助我！

【解决方案3】：

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

请尝试下一个：

background-size: cover;

或

background-size: contain;

【讨论】：