Як зробити заголовок придатним до вікна екрана? - html, css

У мене є заголовок і фонове зображення цього заголовка.

Ось мій код:

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

З наведеним вище кодом, я отримую мій образ скорочуватисяавтоматично відповідно до розміру вікна, але я не можу отримати заголовок. Здається те ж, що я повинен зробити, що заголовок також повинен збільшуватися і зменшуватися відповідно до розміру вікна. Я намагався дати висоту 100%, але він не працює, він отримує мій заголовок до 100px.

Розмір заголовка також повинен бути повторно розміром відповідно до розміру вікна? Як я можу отримати це?

Я намагаюся додати меню в заголовок мій код, як показано нижче

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

Наведений вище код змушує мене досягти всього 5px вище кінця зображення, але розмір заголовка не змінюється. У чому може бути проблема?

Відповіді:

2 для відповіді № 1

Ви повинні замінити висоту з нижньою частиною, щоб відрегулювати висоту на ширину сторінки.

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 для відповіді № 2

Необхідно змінити структуру HTML та 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 для відповіді № 3

Ви можете спробувати це

<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 для відповіді № 4

Ви можете зробити це за допомогою функції jquery і зміни розміру

подобається це:

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

---