用<picture>元素加载什么图像？

Question

我在新网站上实施自适应图片并提出问题。以下示例代码是否会在任何960像素或更大像素的屏幕上加载test-400.jpg是否正确？即使图像宽度仅占屏幕宽度的40％？这是我正在寻找的结果

我试图弄清楚如何在浏览器中找到开发人员工具，用什么图像为我自己解决这个问题，但是我们在如何做到这一点上取得了很大的成功。 / p>

<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>

Answer 1

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

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

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