Wie wird der Header an das Bildschirmfenster angepasst? - html, CSS

Was ich habe, ist ein Header und ein Hintergrundbild für diesen Header.

Hier ist mein Code:

header{
background-image: url(/img/ffHeader.png);
width: 100%;
height: 0;
padding: 0 0 15%;
border: 1px solid;
background-size: 100%;
background-repeat: no-repeat;
background-size: cover;
margin-left: auto;
margin-right: auto;
}

Mit dem obigen Code kann ich mein Bild verkleinernautomatisch gemäß der Fenstergröße, aber ich kann den Header nicht abrufen. Es scheint dasselbe was ich tun soll, dass die Kopfzeile auch entsprechend der Fenstergröße zunehmen und verringern sollte. Ich habe versucht, die Höhe 100% zu geben, aber es funktioniert nicht. Ich bekomme ungefähr 100px.

Die Kopfgröße sollte auch der Fenstergröße nach geändert werden. Wie kann ich das bekommen?

Ich versuche, ein Menü in der Kopfzeile hinzuzufügen. Mein Code lautet wie folgt

<header>
<button id="login">Login</button>
<nav>
<ul>
<li><a href="#home">HOME</a></li>
<li><a href="#myleague">MY LEAGUES</a></li>
<li><a href="#myscore">MY SCORES</a></li>
<li><a href="#leaderboard">LEADERBOARD</a></li>
<li><a href="#howtoplay">HOW TO PLAY</a></li>
<li><a href="#about">RULES</a></li>
<li><a href="#about">FAQ</a></li>
<li><a href="#about">SUPPORT</a></li>
</ul>
</nav>
</header>

nav ul{
list-style: none;
}
nav ul li{
margin: 0 auto;
float: left;
padding-top: 7%;
}

Der obige Code führt dazu, dass ich nur 5 Pixel über dem Ende des Bildes erreichen kann, er wird jedoch nicht mit dem Header geändert Was kann das Problem sein?

Antworten:

2 für die Antwort № 1

Sie müssen die Höhe durch den unteren Rand ersetzen, damit die Höhe der Seitenbreite entspricht.

header{
background-image: url(/img/ffHeader.png);
width: 100%;
height: 0;
padding: 0 0 40%;
border: 1px solid;
background-size: 100%;
background-repeat: no-repeat;
background-size: cover;
margin-left: auto;
margin-right: auto;
}

---

1 für die Antwort № 2

Sie sollten Ihre HTML- und CSS-Struktur ändern

<div class="header_box">
<div class="header">
</div>
</div>


.header_box{

background-image: url(/img/ffHeader.png);
width: 100%;
min-height: 200px;
}


.header
{
height: auto;
width:80%;
padding: 0;
border: 1px solid;
background-size: 100%;
background-repeat: no-repeat;
margin-left: auto;
margin-right: auto;

}

---

0 für die Antwort № 3

Du kannst es versuchen

<style>
.header{
width: 100%;
height: auto;
padding: 0;
border: 1px solid;
background-size: 100%;
background-repeat: no-repeat;
margin-left: auto;
margin-right: auto;
}

.header_image{
height: 100%;
width: 100%;
}
</style>

<div class="header">
<img src = "/img/ffHeader.png" class="header_image" />
</div>

---

0 für die Antwort № 4

Sie können dies mit Jquery und Größenänderung tun

so was:

var width=window.innerWidth;
function resiz_header_height(){
var height = (window.innerWidth * 200) / width;
$(".header").css("min-height", height + "px");
}
$(document).ready(function(){
resiz_header_height();
$(window).resize(resiz_header_height);
});

---