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