CSS object-fit 解決正方形圖片樣式的痛點

  • Prototype Hacker Mark Wu #psdmac@gmail.com
  • Sep 9
  • CSS, HTML

近來電子商務網站都流行如 instagram 般的正方形圖片風格(至於 instagram 開始接受長方形圖片,這又是另外一件事情了)

那我們來看看蝦皮的方式
蝦皮layout
右邊的滑鼠墊是採用上下白邊的方式,因為在商品上架時,蝦皮就會強制要裁切成方形,這樣的圖片賣家自然會選擇上下白邊的方式來處理。
另外一個案例就來看同樣屬於專注台灣市場的行動拍拍賣
行動拍拍賣
跟蝦皮一樣是屬於上傳照片時就要決定裁切成正方形的方法。
因為對於 client 來說要同時處理長方形橫式跟直立然後空白的地方要留白或留黑,然後再滿足 iOS, Android, Web 三平台實在是有其困難處,因此大家不約而同都選擇讓 server 存成方形的圖片。
那這樣的缺點呢?
就是在賣家上架了長寬比差很多的介紹圖就會悲劇了
行動拍拍賣
就像這樣,圖片經過 server 壓過之後根本看不到文字了。

但現在只要使用 CSS object-fit 就能讓後端只需要存原圖,不管長寬比怎樣的圖,都能改成正方形樣式。

範例取自於 Codepen by dudleystorey
這邊有兩張長寬比不同的圖片

object-fit: contain


使用方法非常簡單,就是在圖片上面設定 object-fit: contain ,留白處就是設定 img 的背景色,在這個例子是設定 #eee ,要設定成黑色直接改成 #000 即可。

 

object-fit: cover

cover 的用法我們其實常常使用在 background-size: cover ,但是只能使用在背景圖上面,現在 object-fit 也可以設定 cover ,這樣就能使用 img 的 alt 屬性,對 SEO 來說是有利的。

支援度

從 caniuse 的支援表上來看
caniuse object-fit
目前只有 IE 不支援,iOS10,Android 4.4.4 開始也都全面支援,Firefox 與 Chrome 在很早的版就也已經支援。是前端工程師可以提供給主管的解決方案,那 IE 怎麼辦呢?考慮 fallback 到手機如何呢?畢竟現在已經是人人都會用手機但不是人人都用電腦的時代了,推薦 object-fit 給大家參考。