商品照片大小不一,如何整齊的排在一起呢?

Blog / April 13th 2019

做網站的時候,常常需要把很多照片排在一起
但客戶給我的照片大小都不一樣阿,每次都要花時間裁切真的很麻煩呢

對付這種大小不一的圖片,以前有一個特別的作法:
使用 background-image 這個屬性

因為背景圖片可以隨意的在容器裡面放大縮小、調整位置,所以可以輕易的讓大家排排站
(參考範例 https://codepen.io/taker/pen/NmvjGQ

不過這樣的作法要把圖片的網址,塞入 background-image 這個 CSS 的屬性裡面
而且要硬性規定容器的大小(因為其實容器裡面沒有東西,是空的,就不佔任何空間),算是比較特殊的寫法

但後來 CSS 推出一個新的屬性,來解決這個問題,他叫做 object-fit
概念是類似剛剛說的 background-image,但他更方便,只需要放置一般的 img 標籤,就可以辦到
(demo 連結 https://codepen.io/taker/pen/BvbVvd

一起來看看是怎麼做到的吧!

 

background

接收「網頁15天」最新技術分享