這篇文章給大家分享的是有關(guān)css設(shè)置banner圖自適應(yīng)的方法的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過來看看吧。

網(wǎng)站建設(shè)哪家好，找成都創(chuàng)新互聯(lián)公司！專注于網(wǎng)頁設(shè)計(jì)、網(wǎng)站建設(shè)、微信開發(fā)、成都微信小程序、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項(xiàng)目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了革吉免費(fèi)建站歡迎大家使用！

在css中，可以使用“background-size”設(shè)置banner圖自適應(yīng)，語法“background-size:cover”；其中cover是指把背景圖像擴(kuò)展至足夠大，以使背景圖像完全覆蓋背景區(qū)域。

本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

//test.css
.index-banner-top {
    width: 100%;
    background: url(../imgs/guanyu.png) no-repeat center center;
    height: 210px;
    background-size:cover
}
@media only screen and (max-width: 640px){

    .index-banner-top {
        height: 100px;
    }
}

//test.html

電腦端顯示：

手機(jī)端顯示：

感謝各位的閱讀！關(guān)于“css設(shè)置banner圖自適應(yīng)的方法”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！