Katie Hempenius
试用此演示
- 如需预览网站，请按查看应用。然后按全屏
。 - 使用不同的浏览器尺寸重新加载应用。请注意这些图片有多么不同：它们不仅尺寸不同，而且剪裁和宽高比也不同。
怎么回事？
艺术指导：在不同尺寸的显示屏上显示不同的图片。
自适应图片会加载同一图片的不同尺寸。艺术指导更进一步，根据显示屏加载完全不同的图片。
运用艺术指导来提升视觉呈现效果。例如，此演示中的不同图片剪裁可确保无论显示屏如何，兴趣点（花朵）始终会详细显示。艺术指导的好处纯粹是美学上的；与自适应图片相比，它没有性能优势。
查看代码
- 查看
index.html，了解此演示的艺术指导代码。
代码的运作方式
艺术指导使用 <picture>、<source> 和 <img> 标记。
picture
<picture> 标记为零个或多个 <source> 标记以及一个 <image> 标记提供封装容器。
source
<source> 标记用于指定媒体资源。
浏览器会使用第一个 <source> 标记，其中包含返回 true 的媒体查询。如果没有任何媒体查询匹配，浏览器会回退到加载 <img> 指定的图片。
标记之前。
img
<img> 标记可使此代码在不支持 <picture> 标记的浏览器上运行。
如果浏览器不支持 <picture> 标记，则会加载 <img> 标记指定的图片。