艺术指导
bookmark_borderbookmark
使用集合让一切井井有条
根据您的偏好保存内容并对其进行分类。
试用此演示版
- 如需预览网站,请按查看应用。然后按
全屏
。
- 使用不同的浏览器尺寸重新加载应用。请注意
它们不仅尺寸不同,剪裁也不同
宽高比。
这是怎么回事?
艺术指导
会在不同的显示屏尺寸上显示不同的图片。
自适应图片会加载同一图片的不同尺寸。艺术指导需要
这样就更进一步,根据
。
使用艺术指导提升视觉呈现效果。例如,
本演示中的图片剪裁可确保地图注点(花朵)
无论显示屏如何,始终显示详细信息艺术指导的优势包括
纯美观;与自适应图片相比,它没有任何性能优势。
查看代码
- 查看
index.html
,了解此演示的艺术指导代码。
代码运作方式
艺术指导使用
<picture>
,
<source>
,
和 <img>
标记之间。
照片
<picture>
标记可为零个或多个 <source>
标记和一个 <image>
标记提供封装容器。
source
<source>
标记用于指定媒体资源。
浏览器会将第一个 <source>
标记用于媒体查询
返回 true。如果没有匹配的媒体查询,
浏览器回退到加载 <img>
指定的图片。
标记之前。
img
<img>
标记可使此代码在浏览器不支持
支持 <picture>
标记。
如果浏览器不支持 <picture>
标记,它会加载
使用<img>
标记指定的映像
如未另行说明,那么本页面中的内容已根据知识共享署名 4.0 许可获得了许可,并且代码示例已根据 Apache 2.0 许可获得了许可。有关详情,请参阅 Google 开发者网站政策。Java 是 Oracle 和/或其关联公司的注册商标。
最后更新时间 (UTC):2018-11-05。
[[["易于理解","easyToUnderstand","thumb-up"],["解决了我的问题","solvedMyProblem","thumb-up"],["其他","otherUp","thumb-up"]],[["没有我需要的信息","missingTheInformationINeed","thumb-down"],["太复杂/步骤太多","tooComplicatedTooManySteps","thumb-down"],["内容需要更新","outOfDate","thumb-down"],["翻译问题","translationIssue","thumb-down"],["示例/代码问题","samplesCodeIssue","thumb-down"],["其他","otherDown","thumb-down"]],["最后更新时间 (UTC):2018-11-05。"],[],[]]