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

Question

我们问这个问题，因为这个2013年的线程（100-宽度-背景-图像-自动高度）的答案似乎不再起作用了。

• 我需要一个响应的背景图像与100%的宽度和自动高度。
• 我想根据屏幕大小使用媒体查询而不是Javascript提供不同的图像。
• 如果它在不同的浏览器上工作就好了（至少Chrome/火狐）

使用以下代码：

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

图像显示正确，100%宽度和自动高度（参见此处：JSFIDDLE1），但在更改屏幕大小时，我无法替换图像的源代码，除非我使用Javascript。

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

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

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

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

看这里JSFIDDLE2

但是...这似乎在火狐上不起作用！：-（因为“内容”属性似乎在火狐上不兼容。

所以我想使用“背景图像”属性，并找到一个与所有浏览器兼容的解决方案，但我正在努力设置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

如果您不想大量使用媒体查询来更改背景图像，而对于您的小提琴，在我看来，您试图通过使用img标记使代码尽可能简单，就像您提到的：

如果它能在不同的浏览器上运行（至少是Chrome/Firefox），那就太好了

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

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

srcset

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

• 图像的URL，
• （可选）空格后跟以下内容之一：
  • 宽度描述符，是一个正整数，后跟“w”。宽度描述符除以sizes属性中给定的源大小，以计算有效像素密度
  • 像素密度描述符，是一个正浮点数，后跟“x”

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

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

  用户代理有权选择任何一个可用来源。这为他们提供了很大的回旋余地，可以根据用户偏好或带宽条件来定制他们的选择。