Css 100%宽度的背景图像

正如我们所知，我们可以创建一个响应图像与100%的父宽度和高度，根据以下代码的比例。但是，我希望通过使用

背景图像CSS

将其视为背景图像来实现相同的效果

看来我找不到任何解决办法

---

我找到了另一个解决方案，在中提到过。您可以使用如下代码来完成此操作

HTML

这样，就不需要指定任何固定高度。div的高度将等于实际图像的高度

以下是代码的更新版本：

#包装器{
背景：url(http://www.greycloaktech.com/wp-content/uploads/2015/07/url-small.jpg)无重复中心固定；
-webkit背景尺寸：封面；
-moz背景尺寸：封面；
-o-背景尺寸：封面；
背景尺寸：封面；
}
#包装器>img{
可见性：隐藏；
}

---

您需要让内部div填充父div-因此宽度和高度为100%。然后只需为每个设置100%的背景大小

<div style="height:300px; width:300px;">
    <div id="bg">
    </div>
</div>

<style>
    #bg { 
        width: 100%;
        height:100%;
        background-size:100% 100%;
        background-image:url('http://www.greycloaktech.com/wp-content/uploads/2015/07/url-small.jpg');
    }
</style>

#bg{
宽度：100%；
身高：100%；
背景大小：100%100%；
背景图像：url（'http://www.greycloaktech.com/wp-content/uploads/2015/07/url-small.jpg');
}

---

将图像或div的填充设置为100%，如下所示：

.bg-image{
    background: url('http://www.greycloaktech.com/wp-content/uploads/2015/07/url-small.jpg')  no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    padding:100%;

 }

---

非常简单，只需将somme属性添加到css类；） 我希望这就是你想要的

.bg图像{
宽度：100%；
背景：url（'http://www.greycloaktech.com/wp-content/uploads/2015/07/url-small.jpg');
背景重复：无重复；
背景位置：50%50%；/**/
背景尺寸：封面；
身高：43.5625雷姆；
左：0；
右：0；
排名：0；
底部：0；
位置：固定；
}

你要找的是

背景尺寸

。试试

背景尺寸：封面，图像将填满你的div的所有区域。@SLaks背景尺寸和封面都不符合我的需要，正如@SLaks所说，使用
背景尺寸
属性我认为这里缺少的链接是div没有高度。图像将扩展div以适应其高度，
背景图像
不会对div应用任何高度。如果要使用
背景大小
，则必须在div上指定高度，或者将内容放入其中进行扩展。好吧，我应该提到，我希望在不指定容器高度的情况下使用
背景图像
。。如果您不想指定div的高度，或者添加任何内容，那么您不使用
的原因是什么？@Santi code的直观目的。我想在图像上方添加文本并将其居中。它可以不使用背景图像进行绝对定位，但在我看来它并不好，因为它创建了冗长的html和css代码。你把勺子放下，问我们如何用叉子吃汤。你把原来的问题问错了。你应该问“如何在文本下方居中放置图像”，而不是“如何避免使用”。有十几种方法可以在不使用
position:absolute的情况下使文本居中于图像上方
或
背景图像
。他说他希望在不指定高度的情况下执行此操作。这个问题唯一有意义的方法是如果父div具有某种高度-无高度=无背景，因为没有可见区域。。我提供了300px作为示例。
<div style="height:300px; width:300px;">
    <div id="bg">
    </div>
</div>

<style>
    #bg { 
        width: 100%;
        height:100%;
        background-size:100% 100%;
        background-image:url('http://www.greycloaktech.com/wp-content/uploads/2015/07/url-small.jpg');
    }
</style>

.bg-image{
    background: url('http://www.greycloaktech.com/wp-content/uploads/2015/07/url-small.jpg')  no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    padding:100%;

 }