歡迎光臨
每天分享高質量文章

用一行 CSS 居中並裁剪圖片

作者:侯振宇(@侯振宇hzy)

網址:http://www.cnblogs.com/sskyy/p/4592353.html

點擊“閱讀原文”可查看本文網頁版

設置圖片的裁剪尺寸非常簡單,你只需在 CSS 里使用這行代碼:

img {

object-fit: cover;

}

就是這樣。不需要語意、包裝 div 或者其他沒意義的代碼。

這種技術能很好地把大小不合適的頭像圖片裁剪為正方形或者圓形的圖片。以下麵那隻熊的寬圖片來舉例。一旦把 object-fit:cover 技術應用在這種圖片上,並且設置好寬和高,圖片自己就會進行裁剪和居中。

object-fit:cover 的裁剪方式和 background-size:cover 的完全相同,不過它是用來為 imgs、videos 和其他的媒體標簽設置樣式的,而不是給背景圖片設置樣式。

相當多的最新瀏覽器都支持 object-fit 技術,並且還有 polyfill 專案讓你能在更老的瀏覽器(IE8+)里使用該技術。

赞(0)

分享創造快樂