100％宽度的背景图片，高度为“自动”

我目前正在为一家公司制作移动目标网页。这是一个非常基本的布局，但是在标题下方有一张产品图片，该图片始终为100％的宽度（设计表明，该图片始终从一条边到另一条边）。根据屏幕的宽度，图像的高度显然会相应地进行调整。我最初是使用img（CSS宽度为100％）完成此操作的，效果很好，但我意识到我想使用媒体查询根据不同的分辨率提供不同的图像-假设尺寸较小，中等，例如，同一张图片的大版本。我知道您无法使用CSS更改img src，因此我认为应该为图像使用CSS背景，而不是HTML中的img标签。

我似乎无法正常工作，因为带有背景图片的div既需要宽度也需要高度来显示背景。我显然可以使用“宽度：100％”，但是高度该怎么用？我可以设置一个随机的固定高度，例如150px，然后可以看到图像的顶部150px，但这不是解决方案，因为没有固定高度。我玩过一次游戏，发现一旦有一个高度（用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标签。通常的想法是，目标网页模板将与不同的产品图片一起使用多次，因此我需要确保以最佳方式开发这种模板。

我很抱歉，这有点冗长，但是我从这个项目来回到下一个项目，所以我想把这件事做完。在此先感谢您的宝贵时间，不胜感激。问候

除了直接使用外，background-image还可以img直接使用并使图像扩展视口的所有宽度，max-width:100%;请尝试使用，请记住不要对主容器div施加任何填充或边距，因为它们会增加容器的总宽度。使用此规则，您可以使图像的宽度等于浏览器的宽度，并且高度也会根据长宽比而变化。谢谢。

编辑：在不同尺寸的窗口上更改图像

$(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.比当前接受的答案更接近“正确”的答案。如果要使用CSS完成宽度为100％的可变高度背景图像，而不是使用cover（这将使图像从侧面伸出）或contain（根本不允许将图像伸出），像这样设置CSS：

body {
    background-image: url(img.jpg);
    background-position: center top;
    background-size: 100% auto;
}

这会将背景图像设置为100％宽度，并允许高度溢出。现在，您可以使用媒体查询来换出该图像，而不必依赖JavaScript。

编辑：我刚刚意识到（3个月后），您可能不希望图像溢出；您似乎想要根据其背景图像调整容器元素的大小（以保持其宽高比），据我所知，CSS不可能做到这一点。

希望不久您将能够在元素上使用新的srcset属性img。如果您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;
}

简化版

html {
  background: url(image.jpg) center center / cover no-repeat fixed;
}

您可以使用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年，现在您可以使用具有良好支持的object-fit。它与div的工作方式相同，但作用于元素本身以及包含图像的任何元素。background-size

.your-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

html{
    height:100%;
    }
.bg-img {
    background: url(image.jpg) no-repeat center top; 
    background-size: cover; 
    height:100vh;     
}