问题标签 [srcset]

我无法理解如何避免srcset在屏幕上加载任何图像 < 768px。

我已经尝试了下面的代码，但 sizes 属性似乎并没有像你想象的那样。以下负载适用1024.jpg于所有屏幕尺寸：

或者图片元素，如果它支持一个空的 srcset但它只“提示”浏览器应该加载哪个图像。

我有一个包含 URL 的数组供下载：

每个图像的宽度都在x.

现在的任务是找到最匹配给定任意屏幕分辨率的那些 URL。因此，例如，如果屏幕分辨率为 1920x1080，则数组将被缩短为仅包含 900 像素宽的 URL（即http://ads.900x150.us.dizplayzone.com/12.png，http://ads.900x150.us.dizplayzone.com/55.png等）

如果屏幕分辨率为 320x480，则数组将仅包含http://ads.320x60.us.dizplayzone.com/12.png等http://ads.320x60.us.dizplayzone.com/55.png）

我想模仿的是与使用 PHP 或 Java 的 HTML5 中图像标签的 srcset 属性基本相同的行为。

数组缩短后，仍然可以下载数组中的 URL。

这可以做到吗？

我正在尝试让响应式图像适用于我的标题图像。

这是我到目前为止所拥有的，它有点工作，但是当它大于 960 像素时，图像会继续变大，我希望它在达到 960 像素时停止。

我究竟做错了什么？

今天早上我分叉并修改了一个简单的代码笔，同时我一直在尝试理解 srcset 和尺寸标记以及如何在某些断点处选择图像背后的数学。这是笔：http ://codepen.io/patrickwc/pen/Ijuwq

复制到这里：

html:

CSS：

直到62.5em断点为止，这对我来说是有意义的。这是 1000 像素。考虑到我已经在sizes属性中指定，at(min-width: 62.5em) 25vw图片应该占屏幕大小的四分之一，为什么600 x 600最先加载？1000 / 4 = 250，所以 320 的图片就可以了。我已经阅读了很多关于图片填充的内容，并阅读了 Eric Portis 和 Chris Coyier 关于这个主题的一些很棒的帖子。我不明白我做错了什么，或者它只是一个奇怪的错误？

imgwithsrcset属性看起来是做响应式图像的好方法。是否有适用于 cssbackground-image属性的等效语法？

HTML

CSS

我试图找出一种方法来为 iOS8 客户端提供高 dpi 图像，同时还为支持 w 语法的浏览器提供响应式图像资源。根据 W3C 标准，应该可以在一个 srcset 属性中混合两种语法：

（来源：http ://drafts.htmlwg.org/srcset/w3c-srcset/ ）

但是，当我在 Chrome 38（OS X，无高 dpi）中运行该示例时，它在其他情况下支持 w 语法，无论视口大小如何，浏览器总是加载最大的图像（banner-HD.jpeg）。当我添加

到 srcset Chrome 使用该图像但仍然忽略 100w 图像。

就我而言，我想为两者指定一个较小版本的图像以及 2x 资源：

这似乎适用于 2x iOS8 设备，它们选择 medium@2x.png 因为它们不支持 w 语法。然而，无论视口大小如何，Chrome 似乎仍然不在乎并加载 medium.png。

我在这里做错了什么，或者这是 Chrome 的 srcset 实现中的一个已知问题？

在我的工作中，我们有自己的框架，我们正在尝试考虑实现响应式图像的最佳方式。图像是从后端代码生成的，我们希望有一个可以解决所有用例的控件。

由于 srcset 似乎是响应式图像的最佳解决方案，而 Picture 似乎解决了另外两种情况（艺术指导和 WebP 和 Jpeg XR 等现代图像格式），我们想看看我们是否可以将它们结合起来。

由于图片元素主要与内部带有媒体查询的元素一起使用，因此它是浏览器在满足某些条件时使用它的指令。

Srcset 然而让浏览器根据一些计算来选择图片。

是否有可能将浏览器的选择保留在图片元素中？

例如像这样的东西。

将不胜感激任何帮助:)

我有两张图片，一张是 1000 x 800 像素（“大”），一张是 200 x 200 像素（“小”）。当屏幕小于或等于 500 CSS 像素宽时，我想使用srcset / sizes / picturefill显示小图像，否则显示大图像。

这是一个稻草人的建议：http: //jsfiddle.net/ghhjfo4z/1/embedded/result/

这在我的 1x 像素密度显示器上运行良好。但是当我切换到我的 2x 像素密度视网膜显示器时，突然间，只有当视口宽度小于或等于 250 CSS 像素时才会显示小图像。

当视口小于或等于 500px 时，有什么方法可以让浏览器在我的 2x 像素密度显示器上使用小图像？

基本上我想忽略设备的像素密度，并使用srcset和/或大小来仅选择基于视口的 CSS 像素宽度的图像。

我遇到了一个奇怪的 img 问题，该问题仅在浏览器调整大小或打开开发工具时才会呈现。img 具有 srcset 和 sizes 属性，并且位于聚合物模板内。它在没有属性的情况下正常显示，或者在 Polymer shadow dom 之外显示。我相信这个问题是由 Chrome 39 引起的，并且仅限于谷歌 Chrome，那里不再有 polyfills 在工作。控制台中没有错误，自然那里的状态是 200 ok。我在 Firefox 或 IE 中没有问题。我的聚合物版本是 0.5.0，我在 Polymer github 页面上报告了这个问题，但也许还有其他问题。莱克斯