问题标签 [srcset]

我一直在使用以下标记：

这与图片填充（http://scottjehl.github.io/picturefill/）非常完美，并且不会产生任何跨客户端问题。

我只是想知道是否有人可以确认这是支持使用内联视网膜图像的有效标记。我使用它的原因如下：

1. 图片是内容的一部分，所以不能使用背景图片。
2. Google 不会索引 srcset-attribute，但会索引 src-attribute，这就是我同时使用两者的原因。所以这主要是一个SEO考虑。
3. 据我测试，我还没有发现浏览器发送双重 HTTP 请求。它请求普通桌面上的 src-image 和视网膜显示器上的 srcset-retina (2x) 图像。

我几乎找不到任何关于使用 src 以及 srcset 和 picturefill 与 SEO 和视网膜显示相关的信息。所以如果这个标记没有缺陷，那么我希望更多的人可以使用这种方法来响应和 SEO 友好的图像。

当我在幻灯片周围添加 href 标记时，幻灯片会以 chrome 显示。它在 Firefox 中工作，即在图像链接周围添加了链接：我在图像中使用 srcset。

这是网址http://ec2-23-23-84-92.compute-1.amazonaws.com/

我一直在尝试通过src根据上下文检索最合适的图像标签来做出响应式行为。

标签如下所示：

我什至尝试过这段代码片段（位于： http: //blog.cloudfour.com/responsive-images-101-part-2-img-required/）来检查src每次都有效。

但是，无论浏览器及其宽度如何，src似乎都不会改变（似乎总是如此）。image.jpg

我怀疑，通过重复与属性src中最后一项相同的默认值srcset，它可能会影响结果。否则，决定因素可能是默认大小（最后一项sizes）。

您的帮助将不胜感激。

I've got a main header image:

The difficulty I'm having is twofold:

1. Which size should you set as the src fallback? Largest or smallest? IE doesn't support srcset at all, so you'd be left with a tiny image as your header!! Safari (mac) struggles with it too...

2. Because there no way to say 'n'vw 2x how do you get this to work on iphone? (As it's retina it obviously thinks it's twice as big as it is and pulls a much larger image than required). Is there something that can be done about this??

   Thanks in advance...

我有这个：

我不认为这适用于片段所以，你可以在这里查看：http ://codepen.io/vandervals/pen/ZbOMNR

问题是，当 1024px 图像加载时，我预计它max-width: 100%会开始工作，并将图像显示限制为实际宽度（1024px）。这不是发生的事情，因为它一直在增长，width:100%而是在 1200px 处停止，这是包装器的最大宽度。

为什么这不起作用？我应该怎么做才能将图像的最大尺寸限制为最大实际尺寸？

据我所知，srcsetandsizes属性更侧重于为设备的大小和分辨率应用适当缩放的图像。

似乎没有工具可以使用这些属性来根据屏幕尺寸选择替代图像，例如裁剪或定向不同的图像。

这是对情况的正确理解吗？这是否意味着我们将不得不等待该picture元素被广泛支持来完成这项任务？

我创建了一个简单的例子来说明我到目前为止的经历。

1. 永远不会加载 160 像素的图像。
2. 当我将宽度更改为 147 像素时，会加载 320 像素的图像。
3. 当我将宽度更改为 227 像素时，会加载 640 像素的图像。
4. 当我将宽度更改为 453 像素时，会加载 1280 像素的图像。

我会认为 160px 的图像会加载到浏览器的宽度大于 160px，而 320px 的图像会加载到浏览器的宽度大于 320px 等等。

为什么不是这样？

编辑：看起来 stackoverflow 不是测试这个例子的好地方。您可能必须将代码复制粘贴到您自己的浏览器中以复制不同的浏览器大小。

我有以下图像标签，使用srcsetandsizes属性插入响应式图像：

据我了解，我只是告诉浏览器所有可用的图像大小，它应该只下载基于视口大小等最合理的大小。如果我将浏览器窗口（Chrome）的大小调整为小并刷新页面，“网络”选项卡告诉我，它同时下载了我期望的图像（在这种情况下为 800 像素）以及最大的图像（我从src属性中假设）。

我已经尝试过使用和不使用 picturefill.js，并且我在 OS X 10.10.5 上使用 Chrome 45，所以我认为这不是浏览器兼容性问题。我的语法有什么问题还是我只是误解了 srcset？

当浏览器达到特定的屏幕尺寸时，我正在尝试使用 srcset 属性交换图像。当屏幕尺寸大于 768 像素宽时，我需要显示桌面图像。

在大多数浏览器（Firefox 除外）中，我已经能够使用下面的代码完成此操作。我对“srcset”游戏很陌生，所以我不确定我是否有语法错误。牢记视网膜设备，有人知道我在这里缺少什么吗？浏览器对 srcset 的支持似乎足够了，所以我不确定是什么原因造成的。

在使用 img srcset 且未将 css 应用于文档时，我可以调整浏览器宽度的大小，并且图像宽度会相应更改，以便始终显示完整图像（但更小）。

我怎样才能使它像标准图像标签一样工作？

例如，调整浏览器窗口大小不会改变图像大小...