具有“自动”高度的 100% 宽度背景图像 (2015) - 跨浏览器

Question

重新问这个问题，因为这个 2013 线程 (100-width-background-image-with-an-auto-height) 上的答案似乎不再起作用了。

• 我需要制作具有 100% 宽度和自动高度的响应式背景图像。
• 我想根据屏幕大小使用媒体查询而不是 Javascript 来提供不同的图像。
• 如果它可以在不同的浏览器上运行（至少 Chrome / Firefox）会很好

使用以下代码：

<img src="image.jpg" style="width: 100%;">

图像显示正确，100% 宽度和自动高度（请参阅此处：JSFIDDLE1）但在更改屏幕尺寸时我无法替换它的来源，除非我使用 Javascript。

因此，我正在努力在 DIV 上使用背景图像。

<div class="imageContainer1"></div>

并且，使用以下 CSS，一切正常（至少在 Chrome/Safari 上）：

.imageContainer1 {
    content:url("image.jpg");
}

请看这里JSFIDDLE2

但是.. 这似乎不适用于 Firefox！ :-( 因为“内容”属性似乎在 Firefox 上不兼容。

所以....我想使用“背景图像”属性，并找到一个与所有浏览器兼容的解决方案，但我正在努力设置 100% 的宽度和自动高度。

这个

<div class="imageContainer2"></div>

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

不显示任何东西，但如果你设置，例如：

height: 500px;

您将能够看到图片的一部分。

这是 JSFiddle：JSFiddle3

我试过用：

background-size: cover/contain

但这不是我想要做的，因为“覆盖”将允许图像从侧面伸出，而“包含”根本不允许图像伸出）。

这个噩梦有什么解决办法吗？

Answer 1

如果您不想大量使用media queries 来更改background-image，而至于您的小提琴，在我看来，您正试图通过使用@987654324 使代码尽可能简单@标签，就像你提到的：

如果它可以在不同的浏览器上运行会很好（至少 铬/火狐）

所以..您可以在img 标签中使用srcset 属性，如下所示：

<img src="small.jpg" srcset="medium.jpg 1000w, large.jpg 2000w" alt="image">

srcset

由逗号分隔的一个或多个字符串的列表，表示一组 供用户代理使用的可能图像源。每个字符串都是 组成：

1. 图像的 URL，
2. （可选）空格后跟以下之一：
   • 一个宽度描述符，即一个正整数，后跟'w'。宽度描述符除以源大小 在 size 属性中给出以计算有效像素密度。
   • 像素密度描述符，即一个正浮点数，后跟“x”。

如果未指定描述符，则为源分配默认值 描述符：1x。

宽度描述符和像素密度描述符混用是无效的 在同一个 srcset 属性中。重复的描述符（例如，两个 同一 srcset 中用 '2x' 描述的 bot 源）是 也无效。

用户代理有权选择任何一种可用的 来源。这为他们提供了很大的余地来定制他们的 根据用户偏好或带宽等因素进行选择 条件。