知識星球作者：侯振宇（@侯振宇hzy）
網址：http://www.cnblogs.com/sskyy/p/4592353.html
點選“閱讀原文”可檢視本文網頁版
設定圖片的裁剪尺寸非常簡單，你只需在 CSS 裡使用這行程式碼：
img {
object-fit: cover;
}
就是這樣。不需要語意、包裝 div 或者其他沒意義的程式碼。
這種技術能很好地把大小不合適的頭像圖片裁剪為正方形或者圓形的圖片。以下麵那隻熊的寬圖片來舉例。一旦把 object-fit:cover 技術應用在這種圖片上，並且設定好寬和高，圖片自己就會進行裁剪和居中。
object-fit:cover 的裁剪方式和 background-size:cover 的完全相同，不過它是用來為 imgs、videos 和其他的媒體標簽設定樣式的，而不是給背景圖片設定樣式。
相當多的最新瀏覽器都支援 object-fit 技術，並且還有 polyfill 專案讓你能在更老的瀏覽器（IE8+）裡使用該技術。