具有“自动”高度的100%宽度背景图像

Question

我目前正在为一家公司做一个移动登陆页面。这是一个真正基本的布局，但在标题下方有一个产品的图像，它将永远是100%的宽度（设计显示它总是从边到边）。根据屏幕的宽度，图像的高度显然会相应地调整。我最初用一个img（CSS宽度为100%)，它工作得很好，但我意识到我希望使用媒体查询来为基于不同分辨率的不同图像提供服务-例如，同一图像的小、中、大版本。我知道你不能用CSS改变img src，所以我想我应该为图像使用CSS背景，而不是HTML中的img标记。

我似乎无法正常工作，因为具有背景图像的div需要一个宽度和一个高度来显示背景。我显然可以使用“width：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标签提供服务。一般的想法是，登陆页面模板将使用不同的产品图像无数次，所以我需要确保我开发这是最好的方式可能。

我很抱歉，这是一个有点冗长的，但我来回从这个项目到下一个，所以我想把这件小事做完。提前感谢您抽出时间，非常感谢。问候

Answer 1

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中是不可能的。

希望您很快就能在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得到百分比值。这是因为填充百分比总是根据宽度计算的，即使是垂直填充。

Answer 2

您可以直接使用background-image，而不是使用img，为了使图像扩展到视口的所有宽度，请尝试使用max-width：100%；。请记住，不要对主容器div应用任何填充或边距，因为它们会增加容器的总宽度。使用此规则，您可以拥有与浏览器宽度相等的图像宽度，并且高度也将根据纵横比而改变。多谢了。

编辑：在不同大小的窗口上改变图像

null

$(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');
  }
});

html prettyprint-override"><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>