Question

我所拥有的是该标题的标题和背景图片。

这是我的代码：

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，但它没有用标题调整大小。可能是什么问题？

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

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

   }

Answer 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>

Answer 4

你可以用jquery和resize函数

来做到这一点像这样：

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

如何使标题适合屏幕窗口？

4 个答案: