问题标签 [srcset]

我正在为响应式网页设计设置图像，并采用最近正式化的响应式图像语法。我没有使用所有方面，只是 srcset 和 sizes 部分。粗略地说，我的标记如下：

我的设计是以移动优先的方式构建的。所以我的问题是：

媒体查询的顺序对浏览器选择哪个图像有任何影响吗？

如您所见，我让它们从最大断点变为最小，因为默认大小很小，而且我看到的所有语法示例都将默认大小放在最后。但这与我的主要 CSS（通过 SASS 编译）形成对比，后者也使用最小宽度媒体查询，我（正确地）首先有最小的断点。

我也应该在这个标记中首先使用较小的断点吗？还是在图像标记上下文中没有区别？

我有两张图片：一张桌面版，一张移动版。当视口宽度调整到 480 像素以下时，我希望桌面图像被移动图像替换，就像下面的带有 background-image 属性的 CSS 一样：

我想我可以使用 srcset HTML 属性来实现这一点：

但它不起作用，浏览器一直显示移动图像并在视口调整大小时重新缩放它，但我希望这两个图像保持各自的原始大小。

是否可以使用 srcset 实现此行为？

我读了一篇关于srcset：解释 src-n 语法的最后一个子句的文章。在这篇文章中，有一个例子来解释复杂的。srcset这里是它的一部分：

它表示您的布局有两个断点，分别位于 640 像素和 960 像素，您的布局会发生变化。在最小的布局中，此图像将以 100% 的视口宽度呈现，接下来是 50%（可能是两列设计），在最大的布局中，它将是 33%（三-立柱设计）。

接下来作者给出了上述条件的代码演示，用 using 表示srcset：

但是，我无法弄清楚作者是如何计算所有东西的，比如.89, 1.04, 1.1. 这些像素密度是如何计算出来的？在上面的描述中，只有两个断点：960pxand 640px，那么另一个400w, 520w,是怎么639w出来的呢？

我想知道我是否可以以某种方式使用 css 中的 srcset 属性来（例如）使所有图像变为 2x，它通常像这样工作

我想知道是否有办法在 css 中使用它来使所有图像以 2x 显示提前谢谢：D

这是我的图像标签的样子：

对于桌面设备，我使用小拇指 (270x190)。对于移动设备，我使用大拇指 (690x486)。但是如何为使用中等拇指 (540x380) 的视网膜桌面创建规则？

我正在开发的网页上使用 srcset 属性。

如果我检查页面加载了哪些资源，我会看到 Chrome 41 和 FF 使用 polyfill 以及 Safari 7 总是加载图像两次——一次是完整分辨率，一次是来自 srcset 属性的相应大小。我在这里做错了什么？

我有一个幻灯片之类的东西，图像会尽可能地扩大，但不会超过视口的宽度或高度。基本上object-fit: contain。

我想让这些图像具有响应性，因为对于手机和大桌面来说“尽可能大”是完全不同的。我不能使用<img srcset>，因为现在，它只做屏幕密度（x描述符）或宽度（w描述符）。这样<picture>就可以自己手动制作选择逻辑了。

我开始：

但这并不像屏幕的方向那么简单，因为所涉及的实际纵横比可能会变得非常奇特，无论是对于视口（非常高的手机、浏览器工具栏等）还是对于图像本身；相同的图像可能在一个屏幕上受到宽度限制，但在另一个屏幕上受到高度限制。我想我可以编写一个解析纵横比的脚本，但我很难理解将其转化为有意义的列表的srcset逻辑sizes。

理想情况下 <img srcset>会很快得到h描述符，但我想一起破解一些现在可以工作的东西。

W3C Validator 对以下代码抛出错误：

错误是：

错误值 /images/en-us/news/20140214-01.jpg 1x，/images/en-us/news/20140214-01-mobile.jpg 640w 元素 img 上的属性 srcset：没有为图像 /images/ 指定宽度en-us/news/20140214-01.jpg。（因为一个或多个候选图像字符串指定了宽度（例如，图像字符串 /images/en-us/news/20140214-01-mobile.jpg），所有候选图像字符串都必须指定宽度。）

那么，如何同时指定像素密度 (1x) 的图像 - 在路上我可能想要为高密度显示器 (2x) 和宽度小于 640 像素的显示器做一个？也就是说，以某种方式让 W3C 验证者高兴。

更新：

好吧，我对它进行了一些修改，现在验证器不再抱怨，但它似乎没有正常工作，所以我认为我还没有赢得这场战斗。

我现在有这个：

但是，现在在 Chrome 上，我得到的只是“-mobile”图像，不管我的屏幕有多宽。我希望它在任何宽于 640 像素的显示器上显示完整的 1420 像素宽图像。

我猜我只有一件事不合适......任何帮助将不胜感激。

我想在单击另一个图像时更改图像，但不仅要更改固定图像而是要利用 srcset 的优势，因此浏览器会为当前的主图像大小（响应式布局）选择正确的图像。

这就是我现在正在使用的，香草：

我在这里对 jquery 持开放态度。

有谁知道如何处理这个？

我试图了解 srcset 宽度值是如何工作的，但我所拥有的基本示例让我失望。

鉴于下面的代码，我希望在视口大于 600 像素时显示大图像。但是，它实际上在 784 像素处发生了变化。我不确定这是为什么。