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

object-fit

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

小補充:

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

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

資料來源

最後修改日期: 30 12 月, 2020

作者