前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >引入图片amp-img【ytkah英译AMP-2】

引入图片amp-img【ytkah英译AMP-2】

作者头像
ytkah
发布2020-06-16 19:04:44
1.3K0
发布2020-06-16 19:04:44
举报
文章被收录于专栏:ytkahytkah

  大多数HTML标签可以直接在AMP HTML中使用,但是某些标签,如<img>标签,被等效的或稍微增强的自定义AMP HTML标签所取代(还有一些有问题的标签是完全禁止的,参见规范中的HTML标签)。为了演示附加标记的样子,下面是将图像嵌入页面所需的代码:

代码语言:javascript
复制
<amp-img src="welcome.jpg" alt="Welcome" height="400" width="800"></amp-img>

  运行时可以根据视口位置、系统资源、连接带宽或其他因素选择延迟或优先级资源加载。amp-img组件允许运行时以这种方式有效地管理图像资源。像所有外部获取的AMP资源一样,amp-img组件必须预先给出一个显式的大小(如宽度/高度),以便在不获取图像的情况下可以知道高宽比。实际的布局行为由布局属性决定。

代码语言:javascript
复制
<amp-img
  alt="A view of the sea"
  src="/static/inline-examples/images/sea.jpg"
  width="900"
  height="675"
  layout="responsive"
>
</amp-img>

  支持的layout有:fill(填充),fixed(固定), fixed-height(固定高度), flex-item, intrinsic(内嵌), nodisplay(不显示), responsive(自适应)

  一般设置responsive即可

  更多详情参考https://amp.dev/documentation/components/amp-img/?format=websites

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2020-06-15 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档