使用大小

Question

刚刚了解了srcset属性。我试图运行它没有任何成功。我希望在谷歌浏览器上为iPhone或IPad运行时至少看到1个图像加载，但没有显示任何内容。

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

Answer 1

第一个srcset实施刚刚登陆WebKit，请参阅announcement post。

Answer 2

~~According to the w3c，srcset属性仍处于草稿状态。这意味着尚未建议使用它，因为规范仍然可以更改，并且预计Web浏览器不会实现它。~~

大多数浏览器现在都支持

The scrset attribute。但low-bandwidth和high-bandwidth不是规范的一部分。可能因为很难找到“低”和“高”带宽的客观定义，这在十年内仍然是合理的。所以你不能指望它们会产生任何影响。

Answer 3

它是v34的v34测试版，现在v33是稳定版。

因此，如果没有任何改变，它很快就会处于镀铬状态。

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

<img src="unsupported.jpg" 
     srcset="cat@1x.jpg 1x,cat@2x.jpg 2x" width="100" height="100">

因此，在v34之前版本的Chrome中，您始终会看到unsupported.jpg
v34或更高版本，您会看到cat@1x.jpg用于正常屏幕，cat@2x.jpg用于高分辨率
当然，您通常会将cat@1x.jpg作为标准src属性，这仅用于演示。

请记住，这还不能在iPad / iPhone上运行： - （

Answer 4

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

此外 - 您示例中的low-bandwidth / high-bandwidth部分不属于与srcset相关的任何规范或提案。

Answer 5

Firefox不会在不久的将来支持它。你可以在这里找到它的支持。 Srcset support in different browsers

此属性中没有高带宽和低带宽元素。我们需要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/

Answer 6

简而言之，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的支持非常好，almost all current browsers或多或少支持它。 picture元素的情况为little bit worse。

描述符只是一种显示资源背后隐藏着哪种图像的方法。有各种描述符：

密度描述符。 srcset="image.jpg, image-2X.jpg 2x" 显示密度值-1x，2x等被称为显示密度描述符。如果未提供显示密度描述符，则假定为1x。目标视网膜显示的好变种。
宽度描述符。 srcset="image-240.jpg 240w, image-640.jpg 640w"。我确信这是自我解释的。唯一的问题是宽度描述符本身并没有真正帮助。 Why? read here
大小描述符，只有在使用宽度描述符时才有意义。 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()属性以及其他一些有用的链接here

Answer 7

使用大小

的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％（例如图像与我们的页面缩放，并占视口宽度的一半减去边距）。
如果视口是任何其他尺寸，在我们的情况下小于640px，图像占视口的98％（例如图像与我们的页面缩放并占据视口的全宽减去边距）。 最后一项必须省略媒体条件。

srcset只是告诉浏览器我们提供了哪些图片，以及它们的尺寸。

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

src始终是必填图片来源。如果与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始终是必填图片来源。如果与srcset一起使用，src会在浏览器不支持srcset的情况下投放后备图片。

Answer 8

或者，您可以将<picture>与srcset结合使用，如here所述–就我个人而言，我有更好的经验。

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

如何使用srcset图像属性？

8 个答案:

使用大小

使用不带大小的srcset