@<img>

Overview
Usage
Blank
Initialization
Cases
Other

概述 Overview

说明

.显式图片：功能性、修饰性

.inline，同别的inline不同，它可以设置宽度

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

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

.和<a>一样，转换为block更加方便处理

语法

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

类别	说明
src	图片URL；可以使用本地图片；也可以使用在线图片；还可以是图片的base64编码
alt	图片异常时的提示信息
title	说明信息，当鼠标移入时显示，很多标签都可以使用title属性增加用户体验；实用于桌面端

常用样式

类别	说明
width	宽度
height	高度
object-fit	图片铺贴方式：contain \| cover
vertical-align	对齐方式：top \| middle \| bottom \| baseline

基本使用 Usage

.以下各例使用的原始图片大小为640x300

1.直接使用图片

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

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

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

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

object-fit: contain | cover;

.contain，图片会被缩放至被空间完全包含，定义的尺寸可间会有留白

.cover，图片会被裁切，在定义的空间内最大范围的显示图片

[] 图片使用-指定背景色观察更直接

width: 不指定 320px
height: 不指定 320px
object-fit: 不指定 contain cover

2.使用容器包裹图片

.容器指定宽高、溢出隐藏

.更多的时候，容器体现的是布局的职能

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

2.1 图片指定宽度100%，和容器保持一致，其高度自适应

.容器高度太大，留有空白

.容器高度太小，图片展示不完全

2.2.图片宽、高100%同容器，图片填充模式选择cover填充[如果图片使用contain呢？]

3.其它方案

.不使用容器，直接指定图片宽度、高度，配合使用cover属性

.考虑到布局，通常不这么处理：有容器更容易添加设计

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

图片空白 Blank

说明: .使用容器包裹图片时，当容器加上边框时，不管图片是cover还是contain，容器底部都会有空白; .这个情况只在特定场合会暴露问题：仅仅使用容器和图片，并非普遍存在; .主要是图片的inline特性导致：彼此间有一定的缝隙; .还有就是早期WEB的开发还没有规范可以遵循; .不加边框虽然没有影响，但是问题始终在那里
解决方案: 1.元素方面; 1.1 转换<img>的显示属性为块元素block；任何能将其转换为block元素的方法都可以，如下面的使用弹性盒子；或其它如定位、网格布局等等; 1.2 让<img>浮动起来；需要清除浮动；更多信息，请访问 float 一节; 1.3 设置<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;; 3.其它; .指定容器比盒子小，并设置溢出隐藏，可以解决表面的显式问题

初始化 Initialization

使用容器/布局元素

img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

直接使用<img>

1.指定宽度，图片填充模式 object-fit 为 cover

img {
    display: block;
    max-width: 100%;
    object-fit: cover;
}

2.指定宽度，设置图片比例 aspect-ratio

img {
    display: block;
    max-width: 100%;
    aspect-ratio:4/3;
}

案例 Cases

[] 个人头像

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

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

[] 使用图片优化个人网站主导航-右键单击图片下载到本地使用，或自行准备素材，完成后检查页面各元素的网络加载情况

方案1.使用传统图片方式实现[√]

方案2.使用背景图片实现

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

方案4.使用字体图标实现

其它应用 Other

SVG

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

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

.更多信息，请访问 SVG

Base64

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

.更多信息，请访问 Base64

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

总结与作业 Summary & Homework

总结: 1.图片 <img>使用; 2.显示比例 aspect-ratio; 3.其它：边框 border | 圆角边框 border-radius | 填充 padding; .布局元素只做布局的事，内容元素由各功能标签完成

.开发时，应尽量保证图片和展示尺寸保持一致

.功能型图片，使用<img>；修饰型图片，建议使用背景图片

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

.object-fit: fill | cover | contain;

.object-position: center center;

.aspect-ratio

.过多图片使用技巧，请访问 hover avatar
作业: .使用图片完善个人网站，如导航、头像、相册等等