<picture> 元素加载了什么图像？答案

【问题标题】：What image is loaded with <picture> element?<picture> 元素加载了什么图像？
【发布时间】：2017-02-23 02:34:00
【问题描述】：

我正在一个新网站上实施响应式图片并有一个问题。下面的示例代码将在任何 960 像素或更大的屏幕上加载 test-400.jpg 是否正确？即使图像宽度只占屏幕宽度的 40%？这就是我正在寻找的结果

我试图弄清楚如何在浏览器开发人员工具中找到，使用什么图像来为自己解决这个问题，但在解决如何做到这一点方面没有取得太大成功。

<picture>
  <source media="(min-width: 960px)" sizes="100vw" srcset="test-400.jpg">

  <img src="test.jpg"
       srcset="test-310.jpg 310w, test-400.jpg 400w, test-460.jpg 460w, test-620.jpg 620w, test-840.jpg 840w" sizes="(max-width: 959px) 100vw, 50vw"
       alt="test image">
</picture>

【问题讨论】：

网络面板是检查实际加载了哪些图像资源的一种方法。
我确实想到了这一点，但我正在测试的页面不止一次以不同的尺寸加载了相同的图像。我将设置一个新的测试页面，它只加载一次，然后看看会发生什么 - 以前没有想到。
您尚未为您要查找的结果添加屏幕截图。你的句子结束：“这就是我正在寻找的结果”，之后就没有图像了。你用的是什么浏览器？
在元素面板中选择img，在控制台中输入$0.currentSrc。
也许@alexanderfarkas 应该将他的评论放在“答案”框中，以便您接受它...... ;-)

标签： html image responsive responsive-images

【解决方案1】：

在元素面板中选择img，并在控制台中输入$0.currentSrc，以找出正在使用的元素。

重要的是，您不能选择<picture> 或任何<source> 元素，它必须是<img 部分。如果您收到“未定义”，那么您可能选择了元素的错误部分。

如果选择了正确的部分，您将收到单个图像位置的输出。

【讨论】：