通過CSS3的object-fit來調(diào)整圖片適配尺寸的技巧簡(jiǎn)介
伯樂在線 發(fā)布時(shí)間：2016-02-27 11:47:54 作者：周進(jìn)林 
我要評(píng)論
我要評(píng)論這篇文章主要介紹了通過CSS3的object-fit來調(diào)整圖片適配尺寸的技巧,包括用object-fit來居中并裁剪圖片的方法,需要的朋友可以參考下
你還記得通過設(shè)置圖片的 background-size 屬性可以解決很多問題的時(shí)刻嗎？現(xiàn)在你可以使用 object-fit 了，它最先被 webkit 內(nèi)核的瀏覽器支持，不久其他瀏覽器內(nèi)核也陸續(xù)跟上，當(dāng)然這里不包括IE8以下的IE瀏覽器...
CSS Code復(fù)制內(nèi)容到剪貼板
- .image__contain {
- object-fit: contain;
- }
- .image__fill {
- object-fit: fill;
- }
- .image__cover {
- object-fit: cover;
- }
- .image__scale-down {
- object-fit: scale-down;
- }
居中并裁剪圖片
置圖片的裁剪尺寸非常簡(jiǎn)單，你只需在 CSS 里使用這行代碼：
CSS Code復(fù)制內(nèi)容到剪貼板
- img {
- object-fit: cover;
- }
就是這樣。不需要語義、包裝 div 或者其他沒意義的代碼。
這種技術(shù)能很好地把大小不合適的頭像圖片裁剪為正方形或者圓形的圖片。以下面那只熊的寬圖片來舉例。一旦把 object-fit:cover 技術(shù)應(yīng)用在這種圖片上，并且設(shè)置好寬和高，圖片自己就會(huì)進(jìn)行裁剪和居中。
object-fit:cover 的裁剪方式和 background-size:cover 的完全相同，不過它是用來為 imgs、videos 和其他的媒體標(biāo)簽設(shè)置樣式的，而不是給背景圖片設(shè)置樣式。
相關(guān)文章
淺談CSS中的 object-fit 與 object-position的使用
這篇文章主要介紹了淺談CSS中的 object-fit 與 object-position的使用,詳細(xì)的介紹了object-fit 與 object-position的屬性和使用，具有一定的參考價(jià)值，有興趣的可以了解一2017-11-06
