艺术指导

Katie Hempenius
Katie Hempenius

  • 如需预览网站,请按查看应用。然后按 全屏 全屏
  • 使用不同的浏览器尺寸重新加载应用。请注意 它们不仅尺寸不同,剪裁也不同 宽高比。

艺术指导 会在不同的显示屏尺寸上显示不同的图片。

自适应图片会加载同一图片的不同尺寸。艺术指导需要 这样就更进一步,根据 。

使用艺术指导提升视觉呈现效果。例如, 本演示中的图片剪裁可确保地图注点(花朵) 无论显示屏如何,始终显示详细信息艺术指导的优势包括 纯美观;与自适应图片相比,它没有任何性能优势。

查看代码

  • 查看 index.html,了解此演示的艺术指导代码。

代码运作方式

艺术指导使用 <picture>, <source>, 和 <img> 标记之间。

照片

<picture> 标记可为零个或多个 <source> 标记和一个 <image> 标记提供封装容器。

source

<source> 标记用于指定媒体资源。

浏览器会将第一个 <source> 标记用于媒体查询 返回 true。如果没有匹配的媒体查询, 浏览器回退到加载 <img> 指定的图片。 标记之前。

img

<img> 标记可使此代码在浏览器不支持 支持 <picture> 标记。

如果浏览器不支持 <picture> 标记,它会加载 使用<img>标记指定的映像