2015年1月22日 星期四

用 css 把區域用圖片填滿: object-fit

因為圖片大小不一致的關係,以往要做畫廊的排版都不是很方便,要不就是把圖裁切過後存到server,再不就是計算圖片的長寬後用 js 調整,現在 css 可以直接幫忙解決這個問題,只要使用 object-fit 就可以了。

使用方法是先框出一個固定的區域,然後設定圖片在裡面需要填滿的範圍,如:
img{
width:100%;
height:100%;
}

然後再用 object-fit 設定以下的值:

fill
預設的效果,也就是圖片會變得跟框框一樣大且若跟框框比例不一樣會變形。

contain
圖片完整且剛好放進去。

cover
圖片剛好填滿。

none
圖片不做縮放但還是限制在框框的範圍。

scale-down
The content is sized as if none or contain were specified, whichever would result in a smaller concrete object size.

看實際效果就能一目瞭然。

See the Pen
object-fit
by deathhell (@deathhell)
on CodePen.



IE 還不支援,不過也不意外,目前支援的瀏覽器版本在這邊

使用了這個屬性後,圖片預設是對齊框框的中央,若想調整的話可以再使用 object-position 去調整,後面可以放兩個值,包含指定位置的 left, top, bottom, right,絕對值或相對值的 10% 或 20px,若是給數值的話第一個值是 x 軸的位置,第二個值為 y 軸位置,如:
selector{
object-position: left top;
}
反應:

0 意見:

Related Posts Plugin for WordPress, Blogger...