2015年1月22日 星期四

用 css 自動把圖片填滿

因為圖片大小不一致的關係,以往要做畫廊的排版都不是很方便,要不就是把圖裁切過後存到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 還不支援,不過也不意外,目前支援的瀏覽器版本在這邊
反應:

0 意見:

Related Posts Plugin for WordPress, Blogger...