HTML img 也能有 bg-image 的 cover 效果

object-fit

• fill：預設值，會使圖片變形以合適設定的大小。（不推，會變形）
• contain : 保持圖片比例呈現在設定的大小中。
• cover : 保持圖片比並裁剪至適合的大小中。
• none : 不調整圖片比例。
• scale-down : 等比縮小，和 contain 的效果相似。

小補充：

使用 object-fit: cover 時，可能也會想要移動裁切的位置，這時候就可搭配 object-position，效果就類似於 background-position。object-position 的預設值是 50% 50%，也就是置中的意思，有可以更換為 top、bottom 等值。

透過兩個屬性的搭配，在圖片運用上就可以更有彈性了！

資料來源

• HTML img 也能有 bg-image 的 cover 效果、MDN – object-position