CSS3 的區塊填滿設定- object-fit 與 object-position

因為圖片大小不一致的關係，以往要做整齊的 UI 排版都不是很方便，要不就是把圖裁切過後存到server，再不就是依據比例計算圖片的長寬後再用 js 調整，而 css3 有了 object-fit 後，就可以直接幫忙處理這個問題。

使用方法是先框出一個固定的區域，然後設定圖片在裡面需要填滿的範圍，如:

img{
width:100%;
height:100%;
}

然後再用 object-fit 設定以下的值:

fill
預設的效果，也就是圖片會變得跟框框一樣大且若跟保留的框框比例不一樣會變形。

contain
圖片完整且剛好放進去。

cover
圖片剛好填滿。

none
圖片不做縮放但還是限制在框框的範圍。

scale-down
內容會依據 none 或 contain 選擇一個比較小的大小置入。

看實際效果就能一目瞭然。

IE 還不支援，不過也不意外，目前支援的瀏覽器版本在這邊。

使用了這個屬性後，圖片預設是對齊框框的中央，若想調整的話可以再使用 object-position 去調整，後面可以放兩個值，包含指定位置的 left, top, bottom, right，絕對值或相對值的 10% 或 20px，若是給數值的話第一個值是 x 軸的位置，第二個值為 y 軸位置，如：

selector{
object-position: left top;
}