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