<img>标签定义HTML页面中的图像。 <img>标签有两个必需的属性:src和alt。
<img src="/images/j1.jpg" alt="静物" width="175" height="200">
HTML5新增:
- crossorigin
- sizes
- srcset
srcset属性
指定要在不同情况下使用的图像的URL。
通常与sizes属性一起使用。
语法
<img srcset="URL sizew,URL sizew,.....">
属性值
属性值 | 描述 |
---|---|
URL sizew,URL sizew,….. | 图像的URL和宽度(像素)的集合。多个子集之间用逗号相隔 可能的值:绝对URL – 指向另一个网站的图片(如srcset =“http://www.example.com/image.gif 128w,xxx.com/img2.gif 256w”)相对URL – 指向网站中的文件(如srcset =“image.gif 128w,img2.gif 256w”) |
sizes属性
定义和用法
指定不同页面布局的图像大小。
通常和srcset属性一起使用。
语法
<img sizes="[media query] [length], [media query] [length] ... ">
举例
<img src="/images/fj1.jpg"
srcset="/images/fj1.jpg 128w, /images/fj2.jpg 256w, /images/fj3.jpg 512w"
sizes="(max-width: 360px) 340px, 128px"
/>
属性值
属性值 | 描述 |
---|---|
[media query] [length],.. | 媒体查询来响应图片大小,多个值用逗号隔开。 例如:sizes=”(max-width: 360px) 340px, 128px”, 表示当视区宽度不大于360像素时候,图片的宽度限制为340像素,其他情况下,使用128像素 |