css图片的自适应排版

不知道大家有没有在做多个图片排布的时候感觉会有些吃力，尤其是那些图片的长宽都是不规范的时候，直接填充图片容易拉伸，定宽或者定高，最后都会有些超出边界，下面就是我总结的解决方法。

方法一 ：css的background属性来设置背景图

知识点总结

background的属性有以下这些：

background-color
background-position
background-size
background-repeat
background-origin
background-clip
background-attachment
background-image

1.background-color就不说了。
2.background-position：属性设置背景图像的起始位置。

• 有left,top,right,bottom,center五个值组合显示位置。如果只写第一个，第二个省略默认center。
• x% y%:第一个值是水平位置，第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果您仅规定了一个值，另一个值将是 50%。
• Xpx Ypx: 第一个值是水平位置，第二个值是垂直位置。

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属性，它把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域，很适合做缩略图：

  <!--css部分-->
  li{
    display: inline-block;
    width: 140px;
    height: 140px;
    border: solid 1px #eee;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }
 <!--html部分-->
 <li style="background-image: url('./assets/banner1.jpg')"></li>
 <li style="background-image: url('./assets/loginbg.png')"></li>

效果如下：无论尺寸怎么的图片动能很好的适应显示

用完就会发现，我喜欢直接写img标签，这个都没有img标签了，不要着急，下面就介绍img标签如何实现这个效果

方法二：img的object-fit: contain;

object-fit这个css标记，好像有些陌生。先就把它的知识点讲一下 详细内容见 张鑫旭博客的这一属性讲解链接

1.object-fit有以下这些属性

• fill: 中文释义“填充”。默认值。替换内容拉伸填满整个content box, 不保证保持原有的比例。
• contain: 中文释义“包含”。保持原有尺寸比例。保证替换内容尺寸一定可以在容器里面放得下。因此，此参数可能会在容器内留下空白。
• cover: 中文释义“覆盖”。保持原有尺寸比例。保证替换内容尺寸一定大于容器尺寸，宽度和高度至少有一个和容器一致。因此，此参数可能会让替换内容（如图片）部分区域不可见。
• none: 中文释义“无”。保持原有尺寸比例。同时保持替换内容原始尺寸大小。
• scale-down: 中文释义“降低”。就好像依次设置了none或contain, 最终呈现的是尺寸比较小的那个。

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

  <!--css-->

  li{
    display: inline-block;
    width: 140px;
    height: 140px;
    border: solid 1px #eee;
  }
  li>img{
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  <!--htmls-->

  <li><img src="assets/banner1.jpg"></li>
  <li><img src="assets/loginbg.png"></li>

以下是两种方法实现的效果