因為圖片大小不一致的關係,以往要做畫廊的排版都不是很方便,要不就是把圖裁切過後存到server,再不就是計算圖片的長寬後用 js 調整,現在 css 可以直接幫忙解決這個問題,只要使用
object-fit 就可以了。
可以使用的屬性有這些
fill
The replaced content is sized to fill the element’s content box: the object’s concrete object size is the element’s used width and height.
contain
The replaced content is sized to maintain its aspect ratio while fitting within the element’s content box: its concrete object size is resolved as a contain constraint against the element’s used width and height.
cover
The replaced content is sized to maintain its aspect ratio while filling the element’s entire content box: its concrete object size is resolved as a cover constraint against the element’s used width and height.
none
The replaced content is not resized to fit inside the element’s content box: the object’s concrete object size is determined using the default sizing algorithm with no specified size, and a default object size equal to the replaced element’s used width and height.
scale-down
The content is sized as if none or contain were specified, whichever would result in a smaller concrete object size.
IE 還不支援,不過也不意外,目前支援的
瀏覽器版本在這邊。
Read more