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>

以下是兩種方法實現的效果