css雪碧图（css sprite），其实质就是一种css图像合并的技术。在我们前端开发过程中也多多少少会用到。很早就打算专门写一个相关的demo，今天就趁着这篇博文给做了。demo见我的github仓库文件，相关实现的代码虽然也easy，但也不在这发了（
）：点击打开链接。
使用css sprite的相关案例：去电商网站，打开开发者模式，很多。但是也不只是局限在电商网站里才使用！
前端开发里雪碧图原理：
将很多需要加载的图贴到一起，以图片左上角顶点为原点建立坐标系，然后用background-position：x轴 y轴；来确定在大图中需要的那一张小图的位置即可。简而言之，言而简之就是一个background-position属性。
雪碧图的实现：
关于这里说的实现是指众多小图集成的大图这个过程。
1：ps（photoshop）：这个就靠我们伟大的美工了（呸，原谅我口误，是设计师大大），当然作为新时达的大前端我们也还是需要掌握ps滴；
2：相关的sprite自动化生成工具（例如：cssGaga）：亲，还有请自行Google哦！（划下重点：不要搜成ladygaga了）
嗯，好像说webpack里也有相关的依赖模块，老规矩：Google（
）。
使用该技术的优点：
减少了加载网页图片时对服务器的请求次数，提高了页面的加载速度。
使用该技术的缺点：
拼图和维护比较麻烦；雪碧图调用的图片不能被打印；内存问题。
适用css sprite的条件：
加载量大的小图， 就是说我们很多页面都会用到小图标啊这类的；还有就是图片是静态的，也就是说时时刷新的新闻图片啊不可用。
css图片的自适应排版
不知道大家有没有在做多个图片排布的时候感觉会有些吃力，尤其是那些图片的长宽都是不规范的时候，直接填充图片容易拉伸，定宽或者定高，最后都会有些超出边界，下面就是我总结的解决方法。
方法一 ：css的background属性来设置背景图 知识点总结
background的属性有以下这些：
background-color
background-position
background-size
background-repeat
background-origin
background-clip
background-attachment
background-image1.background-color就不说了。
2.background-position：属性设置背景图像的起始位置。
3.background-size:规定背景图像的尺寸
4.background-repeat:规定如何重复背景图像。默认地，背景图像在水平和垂直方向上重复。
5.background-origin: 规定背景图片的定位区域。
6.background-clip:规定背景的绘制区域。背景被裁剪到什么位置，和origin属性相似
7.background-attachment：规定背景图像是否固定或者随着页面的其余部分滚动。
今天主叫就是background-size的contain属性，它把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域，很适合做缩略图：
li{
display: inline-block;
width: 140px;
height: 140px;
border: solid 1px #eee;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
效果如下：无论尺寸怎么的图片动能很好的适应显示
用完就会发现，我喜欢直接写img标签，这个都没有img标签了，不要着急，下面就介绍img标签如何实现这个效果
方法二：img的object-fit: contain;
object-fit这个css标记，好像有些陌生。先就把它的知识点讲一下详细内容见 张鑫旭博客的这一属性讲解链接
1.object-fit有以下这些属性
2.object-fit的兄弟object-position
object-position 默认值是50% 50%，也就是居中效果和background-position写法和表现都一致。
例如替换内容一直定位在容器的右下角：
object-position: 100% 100%;
例如替换元素相对于右下角20px 10px地方定位：
object-position: right 20px bottom 10px;
3.object-fit的适用性
object-position和object-fit只针对替换元素有作用；
替换元素：其内容不受CSS视觉格式化模型（中文释义参见这里）控制的元素，比如image, 嵌入的文档(iframe之类)或者applet。比如，img元素的内容通常会被其src属性指定的图像替换掉。替换元素通常有其固有的尺寸：一个固有的宽度，一个固有的高度和一个固有的比率。比如一幅位图有固有用绝对单位指定的宽度和高度，从而也有固有的宽高比率。另一方面，其他文档也可能没有固有的尺寸，比如一个空白的html文档。
CSS渲染模型不考虑替换元素内容的渲染。这些替换元素的展现独立于CSS。object,video,textarea,input也是替换元素，audio和canvas在某些特定情形下为替换元素。
使用CSS的content属性插入的对象是匿名替换元素（整段抄袭张老师的）
4.兼容性ie的方法
键连接object兼容解决
实现和background一样的demo
li{
display: inline-block;
width: 140px;
height: 140px;
border: solid 1px #eee;
}
li>img{
width: 100%;
height: 100%;
object-fit: contain;
}
以下是两种方法实现的效果
