专栏首页ytkah引入图片amp-img【ytkah英译AMP-2】

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

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

<amp-img src="welcome.jpg" alt="Welcome" height="400" width="800"></amp-img>

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

<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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • woocommerce调用分类描述另一种方法

      woocommerce是在wordpress基础上开发的,有些函数是通用的,有些需要自己调用,比如文章分类用category_description()就可...

    ytkah
  • 创建第一个AMP页面【ytkah英译AMP-1】

    想创建您的第一个AMP页面又不知道如何开始?在本教程中,您将学习如何创建一个基本的AMP HTML页面,如何对其进行设置并验证它是否与AMP兼容,以及如何为发布...

    ytkah
  • 换个字体解决Dreamweaver文字选不中的问题

      在使用Dreamweaver时,有时我们要选中一些字符进行编辑或删除,光标在英文字上面可以选中,在中文字上面就选不中,郁闷吧。比如在编辑下面这段文字的时候,...

    ytkah
  • Android学习笔记-控件初体验

    python为自己自学的,现仍处于初级阶段,这学期开启的是javaEE和Android开发,所以今后可能会同时出现这些方面的总结内容。

    汐楓
  • 像写作一样去写代码,如何把异步的形式改写成同步的形式

    写代码的时候,碰到一大堆的缩进、花括号是不是特别头疼?为什么会有这么多的标点符号,还有各种技术概念?能不能像写作一样,自由得书写?从形式上,代码比文章多的是格式...

    mixlab
  • 一个日志分析工具的心路历程

    希望_jaxiu
  • 一个日志分析工具的心路历程

    希望_
  • 区块链拒绝马蜂窝式造假

    马蜂窝火了,有人说,它正由"向崇尚自由的加勒比海盗致敬",变为一个盗窃他人平台内容的搬运工,一时网上充斥着无数批评声和反击的辩解声。

    区块链大本营
  • Lambda架构的质疑

    Nathan Marz 写了一篇非常受欢迎的博客文章,描述了 Lambda 架构(如何打破CAP定理)。Lambda 架构是一种在 MapReduce 和 St...

    smartsi
  • 231个web前端的javascript特效分享(仅供本人学习,非教程类型)

    <input type=”text” value=”郭强”onfocus=”if(value==’郭强’) {value=”}”onblur=”if

    botkenni

扫码关注云+社区

领取腾讯云代金券