具有“自动”高度的100％宽度背景图像
我目前正在为一家公司开发移动着陆页。 这是一个非常基本的布局，但在标题下面有一个始终为100％宽度的产品图像（设计显示它总是从边缘到边缘）。 取决于屏幕的宽度，图像的高度显然会相应调整。 我原本是用img（CSS宽度为100％）做的，效果很好，但我意识到我想用媒体查询来根据不同的分辨率提供不同的图像 - 比如说一个小的，中等的例如，相同图像的大版本。 我知道你不能用CSS来更改img src，所以我想我应该使用CSS背景作为图像，而不是使用HTML中的img标记。
我似乎无法正常工作，因为背景图片的div需要宽度和高度来显示背景。 我明显可以使用“宽度：100％”，但我对高度有什么用处？ 我可以将一个随机固定的高度设置为150像素，然后我可以看到图像的顶部150像素，但这不是解决方案，因为它没有固定的高度。 我有一个游戏，发现一旦有一个高度（用150px测试），我可以使用'background-size：100％'来正确地适合div中的图像。 我可以在这个项目中使用更新的CSS3，因为它只针对移动设备。
我在下面添加了一个粗略的例子。 请原谅内联样式，但我想给出一个基本示例，尝试让我的问题更清楚一点。
<div id="image-container">
<div id="image" style="background: url(image.jpg) no-repeat; width: 100%; height: 150px; background-size: 100%;"></div>
</div>
我可能必须根据整个页面给容器div一个百分比高度，还是我看到这个完全错误？
另外，你认为CSS背景是做这件事的最好方法吗？ 也许有一种技术可以根据设备/屏幕宽度提供不同的img标签。 一般的想法是，登陆页面模板将被多次用于不同的产品图片，所以我需要确保我以最好的方式开发这种可能。
我很抱歉，这是有点啰嗦，但我从这个项目到下一个来回，所以我想完成这个小东西。 预先感谢您的时间，非常感谢。 问候
您可以直接使用img并使用图像来传播视口的所有宽度，而不是使用background-image请使用max-width:100%; 请记住不要将任何填充或边距应用于主容器格，因为它们会增加容器的总宽度。 使用此规则，您可以使图像宽度等于浏览器的宽度，高度也会根据纵横比而变化。 谢谢。
编辑：更改不同大小的窗口上的图像
$(window).resize(function(){
var windowWidth = $(window).width();
var imgSrc = $('#image');
if(windowWidth <= 400){
imgSrc.attr('src','http://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a');
}
else if(windowWidth > 400){
imgSrc.attr('src','http://i.stack.imgur.com/oURrw.png');
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="image-container">
<img id="image" src="http://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a" alt=""/>
</div> Tim S.更接近于当前接受的答案的“正确”答案。 如果你想有一个100％的宽度，使用CSS完成的可变高度背景图像，而不是使用cover （这将允许图像从两侧伸出）或contain （它不允许图像伸出） ，只需像这样设置CSS：
body {
background-image: url(img.jpg);
background-position: center top;
background-size: 100% auto;
}
这会将您的背景图像设置为100％宽度并允许高度溢出。 现在，您可以使用媒体查询替换该图片，而不是依赖JavaScript。
编辑：我刚刚意识到（3个月后），你可能不希望图像溢出; 您似乎希望容器元素根据其背景图像调整大小（以保留它的高宽比），而据我所知，这对于CSS来说是不可能的。
希望很快你能够在img元素上使用新的srcset属性。 如果您现在想要使用img元素，那么当前接受的答案可能是最好的。
但是，您可以使用纯粹的CSS创建具有恒定宽高比的响应式背景图像元素。 为此，可以将height设置为0，并将padding-bottom设置为元素自身宽度的百分比，如下所示：
.foo {
height: 0;
padding: 0; /* remove any pre-existing padding, just in case */
padding-bottom: 75%; /* for a 4:3 aspect ratio */
background-image: url(foo.png);
background-position: center center;
background-size: 100%;
background-repeat: no-repeat;
}
为了使用不同的宽高比，请将原始图像的高度除以它自己的宽度，然后乘以100得到百分比值。 这是有效的，因为填充百分比总是基于宽度计算的，即使它是垂直填充。
尝试这个
html {
background: url(image.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}