- Objective: - Breadcrumb: # 概念阐释 picture元素是[[HTML Responsive Images| 响应式HTML]] 的一种。 ## 写法： `<picture></prciture>` ## 包含： - `<source>` 元素和 `<img>`元素 - `srcset`属性：比`src` 提供高像素密度的图像版本, 用于`<source>`元素中 - `media`属性：定义屏幕的尺寸 - `type`属性: 指向一种[[MIME媒体类型]]标准 ```html <picture> <source srcset="mdn-logo.svg" type="image/svg+xml"> <source srcset="mdn-logo-wide.png" media="(min-width: 600px)"> <img src="mdn-logo.png" alt="MDN"> </picture> ``` ## 用途 - `<source>` 为不同的屏幕大小，提供不同的图片 - 如果没有匹配 `<source>` 的尺寸,则使用 `<img>`图片里的图片 # 实例 # 相关内容 # 参考资料