虽然渐变可以替代外部的图片，但是他本身也有可能会影响性能，特别是资源有限的设备上，比如：移动端就需要尽量的减少使用渐变。
1、可伸缩的图片模式
让图片伸缩的同时，既不会超过它的固有尺寸，也不会破坏原有的宽高比，可以使用以下方法：
.image {
max-width:100%;
}
max-width属性可以让图片随着包含它的容器缩小而缩小，当容器放大的时候，图片又不会超过容器的固有宽高。
但是需要注意的是：在某些浏览器上，你单单写一个max-width是无法显示图片的，因为某些浏览器你不为图片设置width,height属性，是无法显示图片的，因此，拓展为以下的写法：
.image {
width: auto,
max-width: 100%,
height: auto
}
2、其他一些控制大小的方法
应用场景：UI设计的矩形图片，但是如果按照原尺寸放进去会显得图片过大，如果给宽高定死尺寸，又会导致图片变形。
// 图片
img {
width: 200px;
height: 200px;
// object.fit有以下几种不同的属性 默认的是 fill
object-fit: cover;
object-fit: contain;
object-fit: none;
object-fit: scale-down;
}
object-fit属性的默认值是fill，意味着图片内容会在某些情况下产生图片的拉伸变形，破坏了宽高比。
cover属性值：
官网解释是：会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。等比例缩放图象到垂直或者水平其中一项填满区域。
contain属性值：
会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。等比例缩放图象到垂直和水平两项均填满区域。
官网解释的比较让人不易理解，配合图片做下说明：
-
contain：
首先是contain属性值，其实它指的就是当图片尺寸与容器尺寸不一致时，图片会根据容器的自适应比例展示出来。
.box {
width: 100px;
height: 150px;
border: 1px solid #ccc;
}
// 图片
img {
width: 200px;
height: 100px;
object-fit: contain;
}
contain.png
容器宽100px，高150px，比例为2:3，因此，图片所展示的宽高比也会自适应为2:3。
-
cover:
cover属性值的话可以理解为最大的面积平铺，而多余的部分则会裁去。
.box {
width: 100px;
height: 150px;
border: 1px solid #ccc;
}
// 图片
img {
width: 200px;
height: 100px;
object-fit: cover;
}
cover.png
-
none：
none属性值的话则是采用图片原有的大小，即不管容器多大，都是使用图片的固有大小。 -
scale-down：
会自动从none和contain中选一个，哪个的结果计算出来的尺寸小就使用哪一个，最终图片会居中显示，但是也是可以使用position定位去重新设置。
3、减少图片的大小
如果网页中要使用到图片，一定需要确保图片不会超出必要的大小，CSS会有方法进行缩放以及剪裁的处理，但是每个多余的像素都会影响性能，下载的时间会加长，CPU也会因为图片的浪费而浪费。
减少图片大小的第一步就是优化图片，图片文件包括一些元数据，它们对浏览器的显示没有用处，有一些程序和服务可以帮助我们剔除这些数据。同时，相比PNG格式的图片，可以通过减少图片中使用到的色彩数量来有效的对图片进行压缩，PNG格式的图片可以处理为PNG24格式，或者更小的PNG8，在线服务的网站有http://tinypng.com.
网友评论