问题标签 [srcset]

当您像这样使用 srcset 时：

或者使用这样的图片标签：

是否有可能找出浏览器决定使用的 URL？检查标签本身的src属性<img>实际上并不能告诉您加载了哪个图像。

（对不起，如果这是重复的。我在任何地方都找不到解决方案。）

希望有人能解释一下——我有固定列宽的同位素项目，这些项目不是通过视口宽度而是通过用户交互来切换的。

固定图像宽度为 105px、160px、333px 和 1200px。

我想使用图片 srcsets 并根据图像宽度而不是视口来更新源。目前我发现很难看到是否有办法触发这个，或者我是否应该通过 javascript 来做这个。

我的图片 srcset 在视口方面工作正常，但是当一列只有 105 像素并且该宽度的 5 - 12 列可能适合屏幕时，由于视口宽度不是我的功能，它在 1200 像素宽的图像中加载想要而不是提供以及我希望的储蓄。

我已经上下搜索了，并找不到太多可以指出我正确方向的东西。非常感谢任何帮助。

我正在尝试在新窗口中打开图像并根据 srcset 加载正确的图像，以便根据分辨率打开正确的图像大小

html:

jQuery

以上不会根据分辨率打开不同的图像，但这https://farm4.staticflickr.com/3059/2835191823_e3636abb34_m.jpg

我相信是因为$str[0];我还没有尝试插入索引 [0]，这将我带到未找到的图像

示例：http ://codepen.io/aFarkas/pen/OVoavw

我一直在研究一个新的响应式网站设计，并且我有一个包含图像网格的画廊，当浏览器视口为 768 像素或以上时跨越 4 列宽（因此每个图像大约占视口的 25%）。767px 或更低的任何东西都只有 1 列宽（在较低分辨率下使其全宽）。

• 桌面尺寸（超过 768 像素）的图像应为 220 像素宽（4 列图像）。
• 480 像素到 767 像素之间的宽度应最大为 420 像素（1 个图像列）。
• 移动设备尺寸（小于 479 像素）应最大为 260 像素宽（1 个图像列）。

我有每个图像的三个来源。220 像素、260 像素和 420 像素。

从上面可以看出，尺寸不遵循视口越小图像越小的正常约定，所以我一直在研究和尝试各种选择。

根据建议，我一直在隐身模式下使用谷歌浏览器，并且还使用 Internet Explorer 进行私密浏览，在加载页面之前浏览器视口很小，等等......以确保我所做的任何更改都得到更新。

我得到的当前代码是最接近我让它工作的代码，它在堆栈溢出时遵循某人的查询（类似于我的）的答案。但是，当尝试实现它时，我似乎仍然无法让浏览器加载正确的图像，它总是加载更大的 420 像素宽的图像。

我的代码目前是这样的：

我在讨论这个主题时的第二个问题。最好将我的场景中的默认 img src 设置为 260px 图像吗？因为如果 srcset 不被理解并且只有中等大小的视口（460-767px）会受到影响，这将涵盖桌面和移动浏览器。还是将默认图像设置为最小尺寸总是最好的？

任何建议将不胜感激，谢谢。

- 编辑 -

只是一个快速更新，我以为我昨天在逻辑上已经弄清楚了，但它没有用，所以我不确定我是否仍然理解计算的整个概念。我的最新编辑如下所示：

所以在我看来，我认为我列出的尺寸部分说明...如果视口至少为 460px，则使用 420px 图像，否则如果视口至少为 768px，则使用 260px 图像。然后最后的 100vm 意味着使用在全视口宽度上最好的那个。我还将默认文件修改为 260px 文件，因为如果某些东西没有被识别，这适合大多数视口大小。

但是，上面的编辑仍然只加载 420px 的图像。

任何建议将不胜感激。即使只是为了纠正我的逻辑！

我正在学习如何为浏览器提供不同尺寸的不同图像，以根据窗口的宽度选择最合适的，但我总是发现浏览器总是下载大尺寸的图像，无论屏幕尺寸是多少是。当窗口大小，例如 400 像素时，浏览器会下载图片的小尺寸、中尺寸和大尺寸！我将示例上传到我在以下 URL 拥有的实时服务器上，我需要您的帮助来弄清楚发生了什么。

编辑（这里是一个简单的例子）

我一直在练习图像以及如何使它们尽可能地响应和预演。我使用相同的代码在 iMAC 5K Retina 2x 显示器和 macbook pro 13.3 1x 显示器上进行测试。这是我的测试代码：

事情是在 iMac 2x 显示器上，无论窗口大小，它总是下载最新的 sea.jpg (1920px)，但它仍然会根据窗口大小下载另一个变体。而 macbook 则只下载最合适的图片，为上网者节省了大量不需要的带宽。这是 chrome 开发人员工具网络使用情况的两个说明性屏幕截图。这是 iMac 图像。如您所见，它下载了窗口大小为 400px 的 sea-small.jpg 但它仍然下载了 sea.jpg 并且 $0.currentSrc 显示了大图像 sea.jpg

这是 macbook pro 的图片：

请注意，我考虑了像素密度，但 iMac 仍然下载最大的 1920 像素图像仍然很奇怪。

我正在使用 Bootstrap 媒体对象，但是当我使用srcsets.

media-body向右偏移，因此overflow: hidden无法看到。

当我在开发工具中删除该srcset属性时，它将解决问题。以下屏幕截图中的工作对象未使用srcset.

破碎的

预期（忽略最后一次洗澡）

我有一个问题，为什么 html5 img 属性不能正确工作？在这个块中，我设置了 srcset，当我的屏幕宽度为 320 像素时，我会得到 image-xs.jpg，但浏览器显示 image-md.jpg，我认为这是因为加载了图像。这是一个错误还是我不明白什么？请解释一下，不会告诉里面的标签图片和img，我想知道，为什么img特别有效？

我试图弄清楚为什么在我的代码中，当我的分辨率约为 400 像素时，浏览器正在加载大小图像。如果我的分辨率很小，我只需要加载小图像，对吗？即使在视网膜显示中，它也应该加载中等图像。

在过去的几个小时里，我一直在努力研究这个。

链接到 JSFiddle：https ://jsfiddle.net/italoborges/v8yftgj2/2/

我究竟做错了什么？

谢谢。

我在流畅的布局上将lazysizes 插件与srcset 结合使用。我不知道如何让浏览器将页面加载到正确的长度，而不是在滚动时扩展页面。

我使用 bootstrap 框架制作了一个 codepen 在这里演示

http://codepen.io/elevenelevne/pen/EKbERV

经过大量阅读，我确定这与浏览器无法计算高度有关，因为它没有设置，但我不能让它以响应方式工作

代码但说 10 行

任何帮助将不胜感激