<img>标签

1.<img>的作用

<img>会发起一个 get 请求,请求一张图片,并展示在页面上。


2.<img>的属性

  • src :src(source),属性的值时请求的图片的路径。
  • width&height:设置图片的宽度、高度,这是标签的一个属性,而不是CSS样式。
    注意:如果只设置其中一个属性,图片会响应式保持原本的宽高比例;如果同时设置两个属性,有可能图片比例会被破坏。
  • alt:替代文本。当<img>请求失败的时候该属性的值会出现在原本图片的位置。

3.<img>的相关事件

  • onload:当<img>标签请求成功,图片成功加载后触发该事件。
  • onerror:当<img>标签请求失败,图片无法加载后触发该事件。通常用于:目标图片请求失败后,转而请求一个报错提示图片。

4.<img>的响应式

通过添加样式max-width:100%,<img>请求的图片能够适应不同大小的窗口,始终填充满窗口。


5.<img>是一个可替换标签

拓展链接:空元素&可替换元素
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容