Skip to content

[CSS] object-fit / object-position 調整置換元素(img..等)的內容

Published: at 01:46 PM (2 min read)

這幾天才看到的一個 css 屬性,以往我都喜歡用 background-image 而不使用 img,很大原因就是 background 提供許多操作圖片縮放的 css

object-fit / object-position 透過這兩個屬性,我們可以控制置換元素的內容填入的位置及大小。

PS. 置換元素指的是img、video 及 canvas …等,簡單說就是 tag 的 src 載入內容後,會取代原本元素。

比較可惜的是, IE、edge 並不支援這兩個屬性

未命名


object-fit:

看看實際的例子吧:

object-position

預設為 center center,通常會跟 object-fit 一起使用,定義物件所顯示的 x/y 位移。(看例子比較容易懂囉)

參考資料:

https://css-tricks.com/almanac/properties/o/object-fit/

https://css-tricks.com/almanac/properties/o/object-position/