How to set the banner image adaptive in css

In css, you can use "background-size" to set the banner image adaptive, the syntax "background-size:cover"; where cover refers to expanding the background image to a large enough size so that the background image is completely covered background area.

The operating environment of this tutorial: Windows7 system, CSS3&&HTML5 version, Dell G3 computer.

//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;
    }
}

rrree

Displayed on computer:

Displayed on mobile phone:

The above is the detailed content of How to set the banner image adaptive in css. For more information, please follow other related articles on the PHP Chinese website!