您好,登錄后才能下訂單哦!
小編給大家分享一下在css上讓圖片居中、圖片適應(yīng)的方法是什么,希望大家閱讀完這篇文章后大所收獲,下面讓我們一起去探討吧!
移動端基本上都是需要做圖片適應(yīng)處理的,比如輪播圖,商品封面圖等等;用戶發(fā)布的圖片都不是尺寸規(guī)格的圖。那么在做移動開發(fā)的小伙伴是否遇到圖片適應(yīng)的困難呢?告訴大家,其實css有一個object-fit屬性,可以很方便我們來調(diào)整圖片,本文是小編整理的在css上調(diào)整圖片的方法。
下面來說一下各個屬性值
這個屬性值在移動端是用得最多的一個。下面看例子
<img src="http://xxiaoyuan.top/static/js/upload/wz/152826027010892.jpg" alt=""> //css部分 img{ border: 2px red solid; width: 300px; height: 300px; object-fit: cover; }
cover是居中填充整個內(nèi)容,其中有一邊是一定會剛好填充完整的,剩余的將會裁剪掉(這里的填充是一定是會填滿整個內(nèi)容的)
效果圖 原圖尺寸比例
fill是填充整個內(nèi)容,但是不會超出內(nèi)容,當(dāng)有一邊填充完之后,如果還有空白處將會拉升使整個內(nèi)容填滿
效果圖 原圖看上面
contain填充的時候一樣不會超出內(nèi)容,當(dāng)一邊填充完之后,填充結(jié)束,并不會拉升改變圖片比例,這樣當(dāng)圖片不夠填充整個內(nèi)容的時候,一定會有一邊留白。
效果圖 原圖看上面
scalc-down感覺跟contain一樣,沒看出有什么不同,如果有兄die知道歡迎交流
none就是默認屬性值,什么填充都不給
看完了這篇文章,相信你對在css上讓圖片居中、圖片適應(yīng)的方法是什么有了一定的了解,想了解更多相關(guān)知識,歡迎關(guān)注億速云行業(yè)資訊頻道,感謝各位的閱讀!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。