具有“自动”高度的100％宽度的背景图像
我目前正在为一家公司开发移动着陆页。 这是一个非常基本的布局，但在标题下面有一个始终是100％宽度的产品图像（devise显示它总是从边缘到边缘）。 根据屏幕的宽度，图像的高度将会相应地调整。 我原本是用img做的（CSS宽度为100％），效果很好，但是我意识到我想用媒体查询来根据不同的分辨率来提供不同的图像 – 比如说一个小的，中等的例如，相同图像的大版本。 我知道你不能用CSS更改img src，所以我想我应该使用CSS背景来显示图像，而不是使用HTML中的img标记。
我似乎无法得到这个正常工作，因为与背景图像的div需要宽度和高度来显示背景。 我可以明显地使用“宽度：100％”，但是我用什么来衡量身高？ 我可以把一个像150px的随机固定高度，然后我可以看到图像的顶部150px，但这不是解决scheme，因为没有一个固定的高度。 我有一个游戏，发现一旦有一个高度（testing150像素），我可以使用'背景大小：100％'正确地适应格中的图像。 我可以在这个项目中使用更新的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％的宽度，并允许高度溢出。 现在，您可以使用媒体查询来replace该图片，而不是依靠JavaScript。
编辑：我刚刚意识到（3个月后），你可能不希望图像溢出; 您似乎希望容器元素根据其背景图像resize（以保持其宽高比），而据我所知，这对于CSS来说是不可能的。
希望很快你能够在img元素上使用新的srcset属性。 如果你现在想使用img元素，那么目前接受的答案可能是最好的。
但是，您可以使用纯CSS来创build具有恒定高宽比的响应式背景图像元素。 为此，将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; }
您可以使用CSS属性background-size并将其设置为cover或contain ，具体取决于您的偏好。 封面将完全覆盖窗口，而封装将使一面贴合窗口，从而不覆盖整个页面（除非屏幕的宽高比等于图像）。
请注意，这是一个CSS3属性。 在较旧的浏览器中，该属性被忽略。 或者，您可以使用JavaScript根据窗口大小更改CSS设置，但这不是首选。
body { background-image: url(image.jpg); /* image */ background-position: center; /* center the image */ background-size: cover; /* cover the entire window */ }
只需使用双色背景图像：
<div style="width:100%; background:url('images/bkgmid.png'); background-size: cover;"> content </div>
添加CSS：
html,body{ height:100%; } .bg-img { background: url(image.jpg) no-repeat center top; background-size: cover; height:100%; }
而html是：
<div class="bg-mg"></div>
CSS：拉伸背景图像100％的宽度和高度的屏幕？
这是2017年，现在你可以使用对象适合 ，有体面的支持 。 它的工作方式与div的background-size但与元素本身以及任何包含图像的元素相同。
.your-img { max-width: 100%; max-height: 100%; object-fit: contain; }
