CSS3 ------- object-fit屬性

做項目經常會遇到圖檔清單展示，圖檔一般是使用者從背景上傳的，上傳的圖檔尺寸千差萬别。如果前端不控制圖檔大小，整個排版就會很亂，如果給定長寬，圖檔又會變形，用背景圖檔來處理有特别麻煩。這個問題一直苦惱了我好久，最近終于找到解決辦法了。

css有一個object-fit屬性，用來指定替換元素的内容應該如何适應到其使用的高度和寬度确定的框

1.首先是一個html結構，然後給定圖檔高寬然後使用object-fit:cover即可實作圖檔不變形而且整體排版也不受影響

<img class="example" src="example.png">
           

.example{
width:160px;
height:90px;
object-fit:cover;
}
           

object-fit關鍵屬性：

object-fit：fill

被替換的内容大小可以填充元素的内容框。 整個對象将完全填充此框。 如果對象的高寬比不比對其框的寬高比，那麼該對象将被拉伸以适應。

object-fit:contain

被替換的内容将被縮放，以在填充元素的内容框時保持其寬高比。 整個對象在填充盒子的同時保留其長寬比，是以如果寬高比與框的寬高比不比對，該對象将被添加“黑邊”。

object-fit:cover

被替換的内容大小保持其寬高比，同時填充元素的整個内容框。 如果對象的寬高比與盒子的寬高比不比對，該對象将被剪裁以适應。

object-fit:none

被替換的内容尺寸不會被改變。

object-fit:scale-down

内容的尺寸就像是指定了

none

或

contain

，取決于哪一個将導緻更小的對象尺寸。

object-fit全局屬性 

object-fit: inherit; 

object-fit: initial; 

object-fit: unset;