So stellen Sie das Bannerbild in CSS adaptiv ein

In CSS können Sie „background-size“ verwenden, um das Bannerbild adaptiv einzustellen, die Syntax „background-size:cover“, wobei cover sich auf die Erweiterung des Hintergrundbilds auf eine ausreichend große Größe bezieht, sodass das Hintergrundbild vollständig bedeckt ist den Hintergrundbereich.

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und 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

Computeranzeige:

Mobiltelefonanzeige:

Das obige ist der detaillierte Inhalt vonSo stellen Sie das Bannerbild in CSS adaptiv ein. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!