Jak dopasować nagłówek do okna ekranu? - html, css

To, co mam, to nagłówek i obraz tła do tego nagłówka.

Oto mój kod:

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

Powyższy kod powoduje, że mój obraz się kurczyautomatycznie zgodnie z rozmiarem okna, ale nie mogę uzyskać nagłówka. Wygląda na to, co powinienem zrobić, aby nagłówek również się zwiększał i zmniejszał zgodnie z rozmiarem okna. Próbowałem podnieść wysokość w 100%, ale to nie działa, a mój nagłówek wynosi około 100 pikseli.

Rozmiar nagłówka powinien być również ponownie rozmiaru, jak na rozmiar okna? Jak mogę to zdobyć?

Próbuję dodać menu w nagłówku mój kod jest jak poniżej

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

Powyższy kod pozwala mi osiągnąć zaledwie 5 pikseli ponad końcem obrazu, ale nie zmienia rozmiaru z nagłówkiem. Jaki może być problem?

Odpowiedzi:

2 dla odpowiedzi № 1

Konieczne będzie zastąpienie wysokości podkładem, aby wysokość odpowiadała szerokości strony.

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 dla odpowiedzi nr 2

Powinieneś zmienić strukturę HTML i CSS

<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 dla odpowiedzi № 3

Możesz spróbować tego

<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 dla odpowiedzi nr 4

możesz to zrobić za pomocą jquery i funkcji zmiany rozmiaru

lubię to:

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

---