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 等值。
透過兩個屬性的搭配,在圖片運用上就可以更有彈性了!