一說到讓不同寬高的圖片都可以填充在一區塊裡，大多數人應該都是先想到使用 background-image + background-size: cover。
而最近在開發系統時，意外發現一個好用的 CSS 屬性 - object-fit。它可以使 image 也達到相同的效果，先看範例：
object-fit 的值有：
- fill：預設值，會使圖片變形以合適設定的大小。（不推，會變形）
- contain: 保持圖片比例呈現在設定的大小中。
- cover: 保持圖片比並裁剪至適合的大小中。
- none: 不調整圖片比例。
- scale-down: 等比縮小，和 contain 的效果相似。
像是 cover 就可以應用在對話框的頭貼，或是比較重要的圖片呈現。因為是直接使用 image 標籤，所以相比 background-image 最大的好處就是，img 標籤的 seo 比較好。
支援度來說，以較新的屬性來說不算太差：
小補充：
使用 object-fit: over 時，可能也會想要移動裁切的位置，這時候就可以使用 object-position，效果就類似於 background-position。
object-position 的預設值是 50% 50%，也就是置中的意思，有可以更換為 top、bottom 等值。
透過兩個屬性的搭配，在圖片運用上就可以更有彈性了！
參考資料：
Udemy (從 Udemy 的頭像發現這個屬性的 XD )