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