如何使全宽图像响应

我有一个图像是我的标题。这是我的简单HTML：如何使全宽图像响应

<html> 
    <body> 
    <div class="wrapper" /> 
    </body> 
</html>

它填充页面的整个宽度，但我不得不指定它的高度显示。这里是CSS：

.wrapper { 
    background-image: url(../assets/bridge.jpg); 
    background-repeat: no-repeat; 
    background-size: 100%; 
    width: 100%; 
    height: 250px; 
}

如何让这个图像响应？现在，当我展开页面时，它会达到图片无法识别的地步。

来源

2013-05-03 jhamm

没有得到你的问题很好安静，但我觉得你在这里缺少值

background-size: 100%; /* 1 value is not wrong but you'll probably need 2 */ 
       --^---

CSS

.wrapper { 
    background-image: url(http://images.google.co.in/intl/en_ALL/images/logos/images_logo_lg.gif); 
    background-repeat: no-repeat; 
    background-size: 100% 100%; 
    width: 100%; 
    height: 250px; 
}

Demo

由于ralph.m建议，如果你正在使用此图片作为您的网站背景，而不是使用background属性body元素而不是div

您需要使用下面的CSS，使响应

body { 
    background: url(bg.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
}

Reference Link

来源

2013-05-03 11:17:35

'+ 1' yes具有单一值的'background-size'定义了_width_，_height_会自动设置为'auto'（因此它最初并没有显示出来）。我一定会用'cover'选项。 – andyb 2013-05-03 12:43:13

你需要仔细考虑如何想/希望这项工作的背景。没有div中的实际内容，它将具有零高度，这就是为什么您需要在其上设置高度;但一般来说，尽量避免设置高度。据推测，如果这是一个“包装”，它将包装一些内容，将它保持开放，而无需设置高度。

至于背景图片，你需要考虑它会如何表现。你只是想让它出现在顶部的一条地带吗？如果您使用Alien先生的解决方案，请注意图像会越来越宽，开始看起来很奇怪。所以我们需要更多关于你在这里做什么的信息。

来源

2013-05-03 11:27:18

如何使全宽图像响应

回答

相关问题