css3 object-fit詳解

圖檔變形的問題，最後通過object-fit: cover完美解決了。這個CSS屬性可以達到最佳最完美的居中自動剪裁圖檔的功能。

object-fit CSS 屬性指定可替換元素的内容應該如何适應到其使用的高度和寬度确定的框。

您可以通過使用 object-position 屬性來切換被替換元素的内容對象在元素框内的對齊方式。

object-fit了解

CSS3 background-size出現的比較早，大家應該知道其支援的一些值，除了數值之外，其還支援幾個關鍵字，例如：60px 80px，60% 80%，cover, contain。

object-fit也是類似的，但還是有些差異，具體有5個值：

.fill { object-fit: fill; }

.contain { object-fit: contain; }

.cover { object-fit: cover; }

.none { object-fit: none; }

.scale-down { object-fit: scale-down; }
           

每個屬性值的具體含義如下（自己了解的白話文，官方釋義見官網）：

• fill: 中文釋義“填充”。預設值。替換内容拉伸填滿整個content box, 如果對象的寬高比與内容框不相比對，那麼該對象将被拉伸以适應内容框。不保證保持原有的比例。
• contain: 中文釋義“包含”。保持原有尺寸比例。被替換的内容将被縮放，保證替換内容尺寸一定可以在容器裡面放得下。是以，此參數可能會在容器内留下空白。
• cover: 中文釋義“覆寫”。 被替換的内容在保持其原有尺寸比例的同時覆寫元素的整個内容框。如果對象的寬高比與内容框不相比對，該對象将被剪裁以适應内容框。保證替換内容尺寸一定大于容器尺寸，寬度和高度至少有一個和容器一緻。
• none: 中文釋義“無”。 保持原有尺寸比例。同時保持替換内容原始尺寸大小。
• scale-down: 中文釋義“降低”。就好像依次設定了none或contain, 最終呈現的是它們兩個尺寸比較小的那個。

object-fit屬性測試

下面我們來測試一下每一個屬性值顯示的效果每個img标簽都設定的 width:200px 和 width:200px，再加上設定的object-fit屬性的不同值，效果圖如下：