问题标签 [srcset]

我一直在阅读srcset。

不幸的是，它并不完全兼容所有浏览器。不支持它的浏览器会发生什么？会下载所有图像吗？我可以指定在这种情况下使用什么图像吗？

我正在尝试将响应式图像切换到移动设备，目前我正在使用 picturefill.js 以及 srcset 和 sizes 进行切换，但是图像并没有从下面使用的代码切换。

我已经编写了一个 JavaScript 填充器来实现srcset，但我需要澄清指定的行为。

虽然srcset允许您指定宽度或分辨率的条件，但我无法确定是否可以同时指定两者。例如：

这应该涵盖单分辨率和双分辨率，以及更小和更宽的屏幕。

我没有看到同时指定宽度和分辨率的示例。问题是：

• 上例中的最后一张图片是否srcset在规格范围内？
• 示例中的其他内容是否不正确？

谢谢

我目前正在尝试在我的网站上制作更好的响应式图像。经过一番研究，我发现了srcsetandsizes属性。

我的目标如下：

• 当屏幕尺寸高于 600 像素或低于 300 像素时，我想提供 250x250 的图像
• 当它介于这两个值之间时，我想提供 350x350 图像
• 我还想要具有更高像素比的屏幕的更高分辨率图像

这就是我想出的。但它并没有像我想象的那样工作。始终提供较小的 250x250。

我还有一个问题：
在我的测试中，我发现在调整窗口大小以提供不同的图像时，浏览器不会加载新图像。有可能这样做吗？

我正在尝试为旧版浏览器编写一个 JavaScript 补丁。通常我会从一些特征检测代码开始，例如：

但我对部分实现该功能的浏览器有疑问。

具体来说，我正在尝试修补 srcset 属性。大多数现代浏览器会报告该属性受支持，但并非所有浏览器都完全支持它（它们支持 x 属性，但不支持 w 属性）。

是否有可以检测到这一点的 JavaScript 方法？

谢谢

HTML5 allows the inclusion of the srcset and sizes attributes on images. I haven’t read anything about how a browser will react if an image has both a width attribute and a sizes attribute.

My guess is that sizes (provided that there is a srcset to go with it) should take precedence. Can anybody tell me where the official word is on that?

Thanks

我正在尝试使用标签srcset和标签。sizesimg

虽然我认为我已经掌握了基础知识——主要归功于这篇文章——但我在该sizes属性的实际应用中苦苦挣扎。

在我能找到的所有示例中，事情都被大大简化了，并且 size 属性被声明为好像在每个断点处，图像宽度将是视口宽度的精确比例，允许使用vm单位。例如：

当然，在现实生活中，图像通常位于其他容器中，而这些容器本身可能位于其他容器中等等，每个容器都有自己的边距、填充或定位。

公平地说，除了最简单的情况（当图像具有流体宽度并且不仅仅是视口的确切百分比时），calc必须使用，这可能会在 html 标记中添加极其复杂的计算，因为图像尺寸需要从视口宽度开始计算，通过任何容器到图像？例如，您将如何计算位于具有 7px 填充的容器的图像的正确大小，该容器本身位于其容器的 45% 的容器内，具有 15px 边距的边栏位于主页面容器的 25% 内15px 的填充，最小宽度为 1220px？

试图在 size 属性中计算这一点似乎很可笑，尤其是考虑到所有这些都可能在每个断点处发生变化。必须让这种大规模复杂的计算与 CSS 的更改保持同步似乎很疯狂。然后你有不完整的浏览器支持calc。

我觉得我错过了一些明显的东西，但它是什么？

注意：我知道 Alexander Farkas 出色的Lazy Sizes，它通过使用data属性为您计算尺寸，但我对标准用法感兴趣。

我需要一个横幅以在许多屏幕尺寸上全宽显示。为此，我有 4 个版本的横幅图像。

1. 横幅-long@2x.jpg (2880x640)
2. 横幅-long.jpg (1440x320)
3. 横幅-short@2x.jpg (1440x640)
4. 横幅-short.jpg (720x320)

我正在使用该srcset属性。

但是，如果我从宽浏览器开始加载长版本，然后缩小浏览器的宽度，短版本永远不会加载，因为长版本被缓存。浏览器 (Chrome) 认为它已经下载了更高分辨率的版本，因此它不会费心加载较小的版本。然而，拥有更小版本的全部意义在于纵横比更适合移动设备（即纵横比更小）。我想强制加载较小的图像资产

有没有办法做到这一点？

我有一个部分模板，可以在页面上呈现一篇文章，该页面基本上是图像和随附的文本。在登录页面中，我将在页面上有几篇文章，不同的类别，主要文章将是全宽的，次要文章是一半，第三个宽度。有时侧边栏文章的宽度也会非常小。然后根据视口，有时图像可以呈现在文本上方或左侧。

总之，同一篇文章 HTML 根据上下文以多种方式呈现。

有没有办法在最新的 srcset 规范中解决这个问题？

据我所知，每个上下文必须有不同的大小属性，基本上将布局/断点耦合到标记，在我的实现中具有如此多的上下文，这将使服务器端逻辑变得可怕。

正如标题所说，有没有办法做到这一点gulp？我需要多个图像包含在多个picture或img srcset属性中。这将仅适用于现场资产（意味着，不是用户上传的图片）。

我想创建 2 个其他图像，一个用于平板电脑，一个用于移动设备，使用gulp-copy，但可能不推荐。我假设移动显示将在 320px-500px（宽度）和平板电脑的 500-1000px（宽度）之间。

我的策略是首先优化图像，将该图像作为主图像，然后生成另外 2 个图像，所以我总是假设我的源图像将用于桌面（显示宽度 > 1000 像素）。<--如果有一项任务我可以传递参数以假设它是其他显示器，那就更好了

我的另一个挑战是height图像，我没有每个显示器的标准（而且很难制定）。因此，如果我假设 100 像素 x 800 像素的图像是桌面图像，我不知道如何为移动设备和平板电脑计算它。

有没有人曾经这样做过？在 gulp 中调整图像分辨率？

已解决：与gulp-responsive-images