<img src="" alt="" title="">
<div class="wrap"> <img src="" alt="" title=""> </div class="wrap">
<figure class="wrap"> <img src="" alt="" title=""> </figure class="wrap">
| 类别 | 说明 |
|---|---|
| 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
转化为块元素后可以忽略 |
img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
图片的获取和加载特别耗费时间。修饰性图片可以转换为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;
}
. 使用容器包裹图片时，当容器加上边框时，不管图片是cover还是contain，容器底部都会有空白
. 图片的inline特性导致：彼此间有一定的缝隙
. 这个情况只在特定场合会暴露问题：仅仅使用容器和图片，并非普遍存在
. 还有就是早期WEB的开发还没有规范可以遵循
. 不加边框虽然没有影响，但是问题始终在那里
移除<img>的inline特性
. 将<img>转换为块盒block[]；任何能将其转换为块盒block的方法都可以，如下面的使用弹性盒子；或其它如定位、网格布局等等
. 让<img>浮动起来；需要清除浮动；更多信息，请访问 float 一节
. 设置<img>的对齐方式为非baseline，如middle；更多信息，请访问 vertical-align 相关内容
background-image: url(data:image/jpeg;base64...);