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！ :-(因为＆＃34;内容＆＃34;属性似乎与firefox不兼容。

所以....我想使用＆＃34; background-image＆＃34;属性，找到一个兼容所有浏览器的解决方案，但我正在努力设置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

但这不是我想做的事情，因为＆＃34;覆盖＆＃34;将允许图像从侧面延伸出来并且＆＃34;包含＆＃34;不允许图像延伸出来。）

这场噩梦的任何解决方案？

Answer 1

如果您不想使用media queries来更改background-image，那么就像您的小提琴一样，我觉得您只是想让代码变得简单尽可能使用img标记，就像你提到的那样：

如果它在不同的浏览器上工作会很好（至少 Chrome / Firefox）

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

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

<强> srcset

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

图片的网址

可选地，空格后跟以下之一：

宽度描述符，是一个正整数，后跟＆＃39; w＆＃39;。宽度描述符除以源大小   在sizes属性中给出以计算有效像素密度。

像素密度描述符，即直接跟随＆＃39; x＆＃39;的正浮点数。



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

混合宽度描述符和像素密度描述符无效   在相同的srcset属性中。重复描述符（例如，两个   同一个srcset中的源代码是用＃2; 2x＆＃39;来描述的机器人   也是无效的。

用户代理可自行选择任何一种可用的代理商   源。这为他们提供了很大的余地来定制他们的   基于用户偏好或带宽之类的选择   条件。

100％宽度的背景图片，带有＆＃39; auto＆＃39; height（2015） - 跨浏览器

1 个答案: