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

這幾天才看到的一個 css 屬性,以往我都喜歡用 background-image 而不使用 img,很大原因就是 background 提供許多操作圖片縮放的 css object-fit / object-position 透過這兩個屬性,我們可以控制置換元素的內容填入的位置及大小。 PS. 置換元素指的是img、video 及 canvas …等,簡單說就是 tag 的 src 載入內容後,會取代原本元素。 比較可惜的是, IE、edge 並不支援這兩個屬性 object-fit: fill 預設值,預設會強制變形至 css 所定義的元素寬高,不管原檔比例。 contain 增加或減少載入物件的寬度及高度(維持原比例)直到放得進所定義的元素寬高。 cover 填滿元素的寬度及高度(維持原比例),通常會剪掉部分的物件。 none 不做任何大小及比例調整。 scale-down 將會選擇設為 none 或 container 兩者間較小的那個物件。 看看實際的例子吧:   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/

Continue reading