Question

我无法理解如何让srcset无法在屏幕上加载任何图片＆lt; 768px。

我已尝试过以下代码，但尺寸属性似乎没有做您想象的事情。以下所有屏幕尺寸均加载1024.jpg：

<img 
  src="default.jpg"
  srcset="img/1024.jpg 1024w" 
  sizes="(min-width: 768px) 768px, 100vw"
/>

或者图片元素，如果它会尊重empty srcset，但它只会提示＆＃34;提示＆＃34;浏览器应加载哪个图像。

Answer 1

另一个答案并不令人满意。通常使用srcset，您可以让浏览器选择候选图像。虽然您可以假设在某些设备上拍摄了哪些图像。你没有任何控制权。 srcset中的每张图片都可以拍摄。

因此，如果您想控制，使用或不使用的内容，您需要使用picture元素。

以下是3个例子。如果视口为768像素或更宽，则会下载“img / 1024.jpg”图像，否则会选择数据uri或损坏的img。

<picture>
  <!--[if IE 9]><video style="display: none;"><![endif]-->
  <source srcset="img/1024.jpg" media="(min-width: 768px)">
  <!--[if IE 9]></video><![endif]-->
  <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="Image">
</picture>

<picture>
  <!--[if IE 9]><video style="display: none;"><![endif]-->
  <source srcset="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" media="(max-width: 768px)">
  <!--[if IE 9]></video><![endif]-->
  <img src="img/1024.jpg" alt="Image">
</picture>

<!-- you can also write (but this makes it invalid) -->

<picture>
  <!--[if IE 9]><video style="display: none;"><![endif]-->
  <source srcset="img/1024.jpg" media="(min-width: 768px)">
  <!--[if IE 9]></video><![endif]-->
  <img alt="Image">
</picture>

虽然第一个和第二个代码示例绝对有效。目前有一些讨论允许通过简单地省略srcset（参见代码示例2）。请在此处查看此讨论：https://github.com/ResponsiveImagesCG/picture-element/issues/243

Answer 2

有一个非常简单的解决方案，没有<picture>。它可能不打算以这种方式使用，但效果很好。

附加1x1px图像，只要尺寸== 0vw就会使用它。在这种情况下，对于768px以下的所有内容都是如此：

<img 
  src="default.jpg"
  srcset="img/null.jpg 1w
          img/1024.jpg 1024w" 
  sizes="(max-width: 768px) 0vw, 100vw"
/>

我知道这并没有回答OP关于“加载NO图像”的问题，但它相对接近，你可以在所有其他情况下引用相同的1x1 px图像，这意味着它不会被下载到那里。 / p>

一个警告： 在下面的情况下，我相信浏览器可能决定使用已经从512px向下的1x1px图像，即使我们指定100px

<img 
  src="default.jpg"
  srcset="img/null.jpg 1w
          img/1024.jpg 1024w" 
  sizes="(max-width: 100px) 0vw, 100vw"
/>

这是因为浏览器采用最接近所需大小的东西，在这种情况下，1接近511而不是1024 ...不确定编辑：这种情况很容易通过附加一张200w的图像来解决，无论如何你都可以这样做

Answer 3

编辑：

简单地说，你不能。

删除/隐藏图像元素必须使用媒体查询或使用Javascript在CSS 中完成。

srcset和sizes标记对于选择图像元素的内容源非常有用，但它无法控制元素的存在或可见性。

srcset和sizes标记旨在增强响应式CSS。它们的值应遵循CSS中定义的任何断点。

srcset

srcset是浏览器可以选择的可用图像列表及其各自的宽度。

根据latest spec，它只会在填充时从该列表中选择：

为了向后兼容，其中一个网址在img元素的src属性中指定。在新用户代理中，src属性使用srcset描述符时会忽略w属性。

因此，它将1024.jpg视为唯一选择，并忽略default.jpg。

将默认图像添加到srcset（使用正确的w描述符 - 这里我假设default.jpg的宽度为768px）：

<img 
  src="default.jpg"
  srcset="default.jpg 768w, img/1024.jpg 1024w" 
  sizes="(min-width: 768px) 768px, 100vw"
/>

尺寸

sizes告诉浏览器当给定媒体查询为真时图像的宽度。这有助于浏览器计算从srcset中选择的图像。

目前，sizes="(min-width: 768px) 768px, 100vw"告诉浏览器：

“如果视口大于 768px，图像将为768px宽，否则当视口小于768px时图像将为全宽。”

我假设您在视口小于768px时不想使用1024px图像。

要在视口小于 768px时提示小图片，请改为使用max-width: 768px：

<img 
  src="default.jpg"
  srcset="default.jpg 768w, img/1024.jpg 1024w" 
  sizes="(max-width: 768px) 768px, 100vw"
/>

当视口小于特定大小时，如何告诉srcset属性加载NO图像

3 个答案:

编辑：

srcset

尺寸