新聞中心
這篇文章將為大家詳細講解有關(guān)css如何實現(xiàn)圖片在頁面上以相同等比例顯示縮放,小編覺得挺實用的,因此分享給大家做個參考,希望大家閱讀完這篇文章后可以有所收獲。
成都創(chuàng)新互聯(lián)是一家集網(wǎng)站建設(shè),微山企業(yè)網(wǎng)站建設(shè),微山品牌網(wǎng)站建設(shè),網(wǎng)站定制,微山網(wǎng)站建設(shè)報價,網(wǎng)絡(luò)營銷,網(wǎng)絡(luò)優(yōu)化,微山網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè),幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強企業(yè)競爭力??沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時我們時刻保持專業(yè)、時尚、前沿,時刻以成就客戶成長自我,堅持不斷學習、思考、沉淀、凈化自己,讓我們?yōu)楦嗟钠髽I(yè)打造出實用型網(wǎng)站。
css圖片等比例顯示具體代碼示例如下:
css圖片等比例顯示代碼示例
效果如下圖:
注:background-size 屬性規(guī)定背景圖像的尺寸。
可能值:
1、length
設(shè)置背景圖像的高度和寬度。第一個值設(shè)置寬度,第二個值設(shè)置高度。如果只設(shè)置一個值,則第二個值會被設(shè)置為 "auto"。
2、percentage
以父元素的百分比來設(shè)置背景圖像的寬度和高度。第一個值設(shè)置寬度,第二個值設(shè)置高度。如果只設(shè)置一個值,則第二個值會被設(shè)置為 "auto"。
3、cover
把背景圖像擴展至足夠大,以使背景圖像完全覆蓋背景區(qū)域。背景圖像的某些部分也許無法顯示在背景定位區(qū)域中。
4、contain
把圖像圖像擴展至最大尺寸,以使其寬度和高度完全適應(yīng)內(nèi)容區(qū)域。
關(guān)于css如何實現(xiàn)圖片在頁面上以相同等比例顯示縮放就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,可以學到更多知識。如果覺得文章不錯,可以把它分享出去讓更多的人看到。
本文名稱:css如何實現(xiàn)圖片在頁面上以相同等比例顯示縮放
分享URL:http://www.dlmjj.cn/article/ipdidh.html