方法一css的background属性来设置背景图知识点总结background的属性有以下这些 background-colorbackground-positionbackground-sizebackground-repeatbackground-originbackground-clipbackground-attachmentbackground-image1.background-color就不说了。2.background-position属性设置背景图像的起始位置。·有left,top,right,bottomcenter五个值组合显示位置。如果只写第一个第二个省略默认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; } liimg{ width: 100%; height: 100%; object-fit: contain; } -4)]
