3

刚刚了解了 srcset 属性。我试图运行它没有任何成功。当我在适用于 iPhone 或 iPad 的 Google Chrome 上运行它时，我希望看到至少 1 张图像加载，但没有显示任何内容。

<img srcset="img1.png 1x low-bandwidth, img2.png 2x high-bandwidth">
4

8 回答 8

5

第一个srcset实现刚刚登陆 WebKit，请参阅公告帖子。

于 2013-08-12T23:04:20.027 回答
4

根据 w3c， srcset 属性仍处于草案状态。这意味着还不建议使用它，因为规范仍然可以更改，并且 Web 浏览器预计不会实现它。

现在大多数浏览器都支持scrset 属性。但是low-bandwidth并且high-bandwidth不是规范的一部分。可能是因为很难找到“低”和“高”带宽的客观定义，十年后仍然合理。所以你不能指望这些会产生任何影响。

于 2013-05-02T12:48:29.007 回答
3

它在 chrome 的 v34 beta 中，现在 v33 是稳定版本。

因此，如果没有任何改变，它很快就会出现在 chrome 中。

我在 v34 上运行了这个测试，它按预期工作 - 甚至还可以显示缩放级别为 200 的高分辨率图像，这是我没想到的（但现在我想起来很明显）。您当然可以检查元素并实时进行更改，如果您没有高分辨率屏幕，还可以放大浏览器。

<img src="unsupported.jpg" 
     srcset="cat@1x.jpg 1x,cat@2x.jpg 2x" width="100" height="100">
  • 所以你总是会看到 Chrome 的 v34 之前的版本unsupported.jpg
  • v34 或更高版本，您会看到cat@1x.jpg普通屏幕和cat@2x.jpg高分辨率
  • 当然，您通常会将cat@1x.jpg其作为标准src属性，这只是为了演示。

请记住，这不适用于 iPad / iPhone :-(

于 2014-04-06T09:09:42.977 回答
2

该srcset属性尚未在任何浏览器中实现。

另外-您示例中的low-bandwidth/high-bandwidth部分不是与srcset.

于 2013-05-02T13:15:22.130 回答
1

Firefox 在不久的将来不会支持它。你可以在这里找到它的支持。不同浏览器中的 Srcset 支持

此属性中没有高带宽和低带宽元素。我们需要 url，即目标设备的宽度，您可以在此处找到它。

<img src="fallback.jpg" srcset="small.jpg 640w 1x, small-hd.jpg 640w 2x, large.jpg 1x,      large-hd.jpg 2x" alt="…">

它可以与 HTML5 的图片元素一起使用。如果您有兴趣了解它的详细信息，请阅读本文。 http://www.smashingmagazine.com/2013/08/21/webkit-implements-srcset-and-why-its-a-good-thing/

于 2014-07-03T13:04:31.623 回答
1

使用带有大小的 srcset

<img sizes="(min-width: 1200px) 580px,
      (min-width: 640px) 48vw,
      98vw"
    srcset="img/hello-300.jpg 300w,
      img/hello-600.jpg 600w,
      img/hello-900.jpg 900w,
      img/hello-1200.jpg 1200w"
    src="img/hello-900.jpg" alt="hello">

sizes就像媒体查询一样，描述图像在视口中占用了多少空间。

  • 如果视口大于 1200 像素，则图像正好是 580 像素（例如，我们的内容在最大 1200 像素宽的容器中居中。图像占它的一半减去边距）。
  • 如果视口在 640px 和 1200px 之间，则图像占视口的 48%（例如，图像随我们的页面缩放，占视口宽度减去边距的一半）。
  • 如果视口是任何其他大小，在我们的例子中小于 640 像素，则图像占视口的 98%（例如，图像随我们的页面缩放并占视口的全宽减去边距）。最后一项必须省略媒体条件。

srcset只是告诉浏览器我们有哪些可用的图像，以及它们的大小。

  • img/hello-300.jpg是 300 像素宽，
  • img/hello-600.jpg是 600 像素宽，
  • img/hello-900.jpg宽 900 像素，
  • img/hello-1200.jpg是 1200 像素宽

src始终是强制性图像源。在使用 with 的情况下srcset，src将在浏览器不支持的情况下提供后备图像srcset。

使用没有尺寸的 srcset

<img src="img/hello-300.jpg" alt="hello"
     srcset="img/hello-300.jpg 1x, 
       img/hello-600.jpg 2x,
       img/hello-1200.jpg 3x">

srcset提供可用图像列表，以及设备像素比率x描述符。

  • 如果设备像素比为 1，则使用img/hello-300.jpg
  • 如果设备像素比为 2，则使用img/hello-600.jpg
  • 如果设备像素比为 3，则使用img/hello-1200.jpg

src始终是强制性图像源。在使用 with 的情况下srcset，src将在浏览器不支持的情况下提供后备图像srcset。

于 2017-01-25T09:33:49.863 回答
1

简而言之，Srcset这是一个新属性，它允许您为不同的屏幕尺寸/方向/显示类型指定不同类型的图像。用法非常简单，您只需提供许多不同的图像，用逗号分隔它们：<img src="image.jpg" alt="image" srcset="<img> <descriptor>, ..., <img_n> <descriptor_n>">. 这是一个例子：srcset="image.jpg 160w, image2.jpg 320w, image3.jpg 2x"

这是一个更长的答案，它更详细地解释了事情。

首先，您错过了必需的src属性，因为srcset仅增强了 img 标签。

srcset 和图片的区别。两者srcset和picture做的事情大致相同，但有一个细微的区别：picture规定浏览器应该使用什么图像，而srcset给浏览器一个选择。很多东西都可以用来选择这个选项，比如视口大小、用户偏好、网络状况等等。对的支持srcset非常好，几乎所有当前的浏览器都或多或少地支持它。有picture元素的情况就差一点。

描述符只是显示资源背后隐藏着什么样的图像的一种方式。有多种描述符：

  • 密度描述符。srcset="image.jpg, image-2X.jpg 2x" 显示密度值（1x、2x 等）称为显示密度描述符。如果未提供显示密度描述符，则假定为 1x。针对视网膜显示器的良好变体。
  • 宽度描述符。srcset="image-240.jpg 240w, image-640.jpg 640w". 我相信这是不言自明的。唯一的问题是宽度描述符本身并没有真正的帮助。为什么？在这里阅读
  • size descriptor，仅在使用宽度描述符时才有意义。srcset="image-160.jpg 160w, image-320.jpg 320w, image-640.jpg 640w, image-1280.jpg 1280w" sizes="(max-width: 480px) 100vw, (max-width: 900px) 33vw, 254px">. 浏览器的指令如下所示：(max-width: 480px) 100vw— 如果视口为 480 像素宽或更小，则图像将是视口宽度的 100%。(max-width: 900px) 33vw— 如果视口为 480 像素宽或更小，则由于之前的媒体条件，将永远无法达到此规则。而 254px 是当没有列出媒体条件时，假定长度是在其他媒体条件都不满足时使用的默认值。

为了完整起见，将在此处添加 CSS 中的背景图像的image-set()属性以及此处的一些其他有用链接

于 2015-08-29T10:45:37.943 回答
0

或者，您可以按照此处<picture>所述使用with - 就我个人而言，我有更好的体验。srcset

<picture>
    <source media="(min-width: 1200px)" srcset="img/hello-1200.jpg" />
    <source media="(min-width: 900px)" srcset="img/hello-900.jpg" />
    <source media="(min-width: 600px)" srcset="img/hello-600.jpg" />
    <img src="img/hello-300.jpg" />
</picture>
于 2020-06-23T09:52:51.877 回答