HTML <img> srcset 属性

HTML img 标签参考手册 HTML <img> 标签

实例

图像标记如下：

<img srcset="wolf_1400.jpg 1400w, wolf_700.jpg 700w, wolf_400.jpg 400w" alt="Wolf Garden">

尝试一下 »

浏览器支持

Internet ExplorerFirefoxOperaGoogle ChromeSafari

除了IE外，所有现代浏览器都支持 srcset 属性。

定义和用法

iPhone里面切图会有@1x，@2x，@3x的概念，主要是用在为iphone4以前、iphone4/5/6（retina屏幕，2倍像素密度）和iphone6+（3倍设备像素密度）加载不同精度的图片。

HTML5中新引入的srcset特性也是类似的设计目的，用来支持网页中响应式图片加载。

srcset中的x描述符表示设备像素密度，比如retina屏幕的x为2。

在支持 srcset 的用户代理中，当使用 'w' 描述符时，src 属性是 1x 的默认选项。

在支持 srcset 的用户代理中，当使用 'w' 描述符时，src 属性会被忽略。

浏览器支持：IE不支持。Chrome/Firefox/Edge/Safari/Opera都支持。

HTML 4.01 与 HTML5之间的差异

无。

语法

以逗号分隔的一个或多个字符串列表表明一系列用户代理使用的可能的图像。每一个字符串由以下组成：
  1. 一个图像的 URL。
  2. 可选的，空格后跟以下规则的其中之一：
    • 一个宽度描述符，是一个正整数，后面跟 'w'符号。该宽度整数被除以sizes属性给出的图像大小来计算得到有效的像素密度值。
    • 一个像素密度描述符，那是一个相对的浮点数，后面跟 'x' 符号。

如果没有指定源描述符，那它会被指定为默认的 1x。

在相同的 srcset 属性中混合使用宽度描述符和像素密度描述符时，会导致该值无效。

重复的描述符（比如，两个源 在相同的srcset两个源都是 '2x'）也是无效的。


HTML img 标签参考手册 HTML <img> 标签