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