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

Question

我目前正在为一家公司开发移动登陆页面。这是一个非常基本的布局，但在标题下方有一个产品图像，其宽度始终为 100%（设计显示它始终从边到边）。根据屏幕的宽度，图像的高度显然会相应调整。我最初是用 img（CSS 宽度为 100%）做的，效果很好，但我意识到我想使用媒体查询来根据不同的分辨率提供不同的图像——假设是小型、中型和例如，同一图像的大版本。我知道您不能使用 CSS 更改 img src，所以我想我应该为图像使用 CSS 背景，而不是 HTML 中的 img 标签。

我似乎无法正常工作，因为带有背景图像的 div 需要宽度和高度来显示背景。我显然可以使用 ‘width: 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 标签。总体思路是，着陆页模板将多次使用不同的产品图片，因此我需要确保以最佳方式开发它。

我很抱歉这有点啰嗦，但我在这个项目和下一个项目之间来回切换，所以我想完成这件小事。

原文由 Darryl Young 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

而不是使用 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>

通过这种方式，您可以在不同大小的浏览器中更改图像。

原文由 maksbd19 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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 得到百分比值。这是有效的，因为填充百分比总是根据宽度计算的，即使它是垂直填充。

原文由 cr0ybot 发布，翻译遵循 CC BY-SA 3.0 许可协议