方法一：css的background属性来设置背景图知识点总结background的属性有以下这些： background-colorbackground-positionbackground-sizebackground-repeatbackground-originbackground-clipbackground-attachmentbackground-image1.background-color就不说了。2.background-position：属性设置背景图像的起始位置。·有left,top,right,bottom，center五个值组合显示位置。如果只写第一个，第二个省略默认center。·x%y%第一个值是水平位置，第二个值是垂直位置。左上角是0%0%。右下角是100%100%。如果您仅规定了一个值，另一个值将是50%。·XpxYpx：第一个值是水平位置，第二个值是垂直位置。3.background-size：规定背景图像的尺寸·length：设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为"auto”。·percentage:以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为"auto"。·cover把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。·contain：把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。4.background-repeat：规定如何重复背景图像。默认地，背景图像在水平和垂直方向上重复。·repeat-x,repeat-y背景图像将在水平方（垂直）向重复。·no-repeat:不重复。·inherit规定应该从父元素继承background-repeat属性的设置。5.background-origin：规定背景图片的定位区域。·padding-box:背景图像相对于内边距框来定位。·border-box背景图像相对于边框盒来定位·content-box背景图像相对于内容框来定位。6.background-clip：规定背景的绘制区域。背景被裁剪到什么位置，和origin属性相似·padding-box:背景图像被裁剪到内边距内部。·border-box:背景图像被裁剪到边框内部。·content-box:背景图像被裁剪到内容框内部。7.background-attachment：规定背景图像是否固定或者随着页面的其余部分滚动。·scroll：默认值。背景图像会随着页面其余部分的滚动而移动。·fixed：当页面的其余部分滚动时，背景图像不会移动。·inherit规定应该从父元素继承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的object-fit:contain;1.object-fit有以下这些属性·fill：中文释义“填充”。默认值。替换内容拉伸填满整个contentbox，不保证保持原有的比例。·contain：中文释义“包含”。保持原有尺寸比例。保证替换内容尺寸一定可以在容器里面放得下。因此，此参数可能会在容器内留下空白。·cover：中文释义“覆盖”。保持原有尺寸比例。保证替换内容尺寸一定大于容器尺寸，宽度和高度至少有一个和容器一致。因此，此参数可 能会让替换内容（如图片）部分区域不可见。·none：中文释义“无”。保持原有尺寸比例。同时保持替换内容原始尺寸大小。·scale-down：中文释义“降低”。就好像依次设置了none或contain，最终呈现的是尺寸比较小的那个。2.object-fit的兄弟object-positionobject-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的方法实现和background 一样的demo li{ display: inline-block; width: 140px; height: 140px; border: solid 1px #eee; } li>img{ width: 100%; height: 100%; object-fit: contain; } -
4)]
