图像

@<img>

焦点: 如何优雅的展示图片？

概述 Overview

. The <a> HTML element embeds an image into the document. 它本身也是一个容器，这种特性称之为可替换元素 - replaced element；可以设置大小

. 展示图片：功能性、修饰性

. 行盒 inline，同别的 inline 不同，它可以设置宽度；因为它是一个容器

. 单标签；不同IDE的处理方式不尽相同

. 常用图片格式：jpg、png、gif 和 Webp 格式

. 和 <a>一样，转换为块盒 block 更加方便处理 - 抛弃了行内元素的特性

. 更多信息，请访问 MDN - <img>

<img src="" alt="" title="">

常用属性
类别	说明
src	图片URL；可以使用本地图片；也可以使用在线图片；还可以是图片的 base64 编码
alt	图片异常时的提示信息
title	说明信息，当鼠标移入时显示，很多标签都可以使用 title 属性增加用户体验；适用于桌面端
decoding	图片解析方式；auto \| sync 同步解析 \| async 异步解析
loading	图片加载方式；eager 立即加载 \| lazy 延迟加载

常用样式
类别	说明
width	宽度
height	高度
object-fit	图片大小调整方式 fill：填充整个容器，图片可能被拉伸；默认 contain：图片会被缩放至被容器完全包含，容器可间会有留白 cover：保持比例填满容器；图片可能被裁剪 none：保持图片大小不变
object-position	图片和容器的对齐方式 center：图片居中；默认 left right bottom top
vertical-align	对齐方式：baseline \| top \| middle \| bottom

[] 图片的容器特性

图片大小200*87

.img-obj-fit {
  width: 350px;
  height: 350px;
  background-color: #f40;
  object-fit: fill contain cover none;
}

基本使用 Usage

功能型图片，使用<img>

修饰型图片，建议使用背景图片

更多图片使用技巧，请访问 hover avatar

使用容器包裹图片

这里的容器是指额外增加一个元素作为图片的容器；不是图片本身的容器特性

当容器和图片尺寸不匹配的时候：

容器大，图片小，容器留有空白

容器小，图片大，图片展示不完全

最佳实践：图片宽、高同容器，图片填充模式 object-fit 选择 cover；并根据需要使用 object-position 调整位置

.basic {
  width: 350px;
  height: 350px;
}

/* <img> 的初始化 */
.img-with-wrap {
  display: block;//消除空白
  width: 100%;//宽高同容器
  height: 100%;//宽高同容器
  max-width: 100%;//避免小图片被放大；和 width 两者2选一
  object-fit: cover;//按比例填充满容器
}

布局元素只做布局的事，内容元素由各功能标签完成

容器更多的体现的是布局的职能

flex 布局中，如果直接使用 <img> 和其它元素，借助 flex 属性等分布局，则 <img> 仍然会撑开，导致布局失效；所以必须使用容器包裹图片

开发时，应尽量保证图片和容器大小保持一致或接近

响应式开发，需要准备多种尺寸图片备用

直接使用图片 - 不建议

直接使用，按照图片原始大小显示，布局容易受到影响

仅仅指定图片宽度，其高度自适应。图片高度太大，布局被撑开；图片高度太小，布局被压缩

同时指定宽度width、高度height；如果宽高比例和图片比例不一致，导致图片变形

同时指定宽度width、高度height、图片填充模式object-fit；布局不会打乱；元素指定了宽度和高度的情况下才有效

.img-alone {
  width: 350px;
  height: 350px;
  object-fit: cover;
}

[] 个人头像

方案1. 使用容器

方案2. 不使用容器

提示：

. border-radius: 50%可以使元素边角圆角化

. padding对设计的影响；容器有padding时，需要同时设置容器和图片的圆角，但容器不需要溢出隐藏；容器无padding时，只需要设置容器的圆角和溢出隐藏

[] 图片导航/链接 - 见顶部导航

方案1. 使用传统图片方式

方案2. 使用背景图片

方案3. 使用伪元素和背景图片

方案4. 使用字体图标

焦点 Focus

懒加载 LazyLoad

图片的获取和加载特别耗费时间。修饰性图片可以转换为base64、或使用SVG、或使用精灵图、或使用字体图标，都能显著改善加载效果

加载：每个图片加载的时候都会发生一个服务请求

解析

渲染

. 图片多的情况或者图片大的情况下，需要采取懒加载措施，仅当图片进入到特定范围内时，才触发加载，可以有效避免因图片的加载影响用户体验

. 综合使用 <img> 属性和 CSS 样式，建议显示的为图片指定尺寸，避免布局变化以达到最佳实践 - Putting width and height on lazyloaded images fixes this issue and is a best practice

. 懒加载的处理，不同浏览器有差异；具体情况要看浏览器的发展支持

. 最稳妥的方式，请使用 JS懒加载、手把手教你实现图片懒加载

[] 懒加载 - 在浏览器监测视图中，选择网络，滚动页面，查看图片懒加载情况

<img src="./web/imgs/1.jpg" alt="" loading="lazy" decoding="async">
...
<img src="./web/imgs/100.jpg" alt="" loading="lazy" decoding="async">

img {
display: block;
width: 300px;
height: 300px;
content-visibility: visible;
margin-bottom: 100vh;
}

图片空白 Blank

. 使用容器包裹图片时，当容器加上边框时，不管图片是cover还是contain，容器底部都会有空白

. 图片的inline特性导致：彼此间有一定的缝隙

. 这个情况只在特定场合会暴露问题：仅仅使用容器和图片，并非普遍存在

. 还有就是早期WEB的开发还没有规范可以遵循

. 不加边框虽然没有影响，但是问题始终在那里

解决方案

移除<img>的inline特性

1. 元素方面

. 将<img>转换为块盒block[]；任何能将其转换为块盒block的方法都可以，如下面的使用弹性盒子；或其它如定位、网格布局等等

. 让<img>浮动起来；需要清除浮动；更多信息，请访问 float 一节

. 设置<img>的对齐方式为非baseline，如middle；更多信息，请访问 vertical-align 相关内容

img {
display: block;
float: left;
vertical-align: middle;
}

2. 容器方面

2.1 设置容器的字体大小font-size为0[行高line-height为0]

2.2 容器使用特定布局，如弹性盒子flex，容器各子项将被强制转换为block

.wrap {
font-size: 0;
line-height: 0;
display: flex;
}

SVG

. 将图片转换成<svg>使用；从结构上优化页面；如字体图标网站 iconfont 可以将图标文件转换为<svg>

. 适合少量、小体积、装饰性图片

. 更多信息，请访问 SVG

Base64

. 对图片编码，然后指定给src或背景图片；从样式上优化页面

. 更多信息，请访问 Base64

background-image: url(data:image/jpeg;base64...);

总结 Summary

内容

图片 <img> 使用

样式

. 对象大小 object-fit

. 对象对齐 object-position

. 圆角边框 border-radius

. 溢出 overflow

作业 Homework

内容: 1. 使用图片完善个人网站，如导航、头像、相册等等