适合背景标题图像

Question

我在标题部分有图像，但不是整个图像全屏显示

请看下面的图片:

全浏览器窗口屏幕:

如果我像这样调整窗口的大小，图像就会变得合适而没有任何剪切:

图片显示窗口大小

我希望图像适合全屏，而不像我们缩小浏览器窗口大小时那样有任何剪切。谢谢! !

代码:

<!-- Header Section START-->
<div class="header">
<div class="row">
    <div class="col-md-5">
        <h2 style="padding-left:10px;color:white;">Online Video Gallery <span class="glyphicon glyphicon-film fa-lg" style="color:black;"></span></h2>
    </div>
    <div class="col-md-offset-4 col-sm-3">
        <p style="margin-top:20px;">    <input type="text" name="search_box" placeholder="Search here">&nbsp;<input type="submit" name="search_btn" value="Search"></p>
    </div>
</div>
</div> <!-- Header END-->

CSS .header class code:

.header {
width:100%;
height:100%;
background-image: url(/image/header.jpg);
background-size: cover;
border-radius:4px; 
}

Answer 1

试试bacground-size:cover; .

如果它不工作，设置你的图像宽度为100%。例如:width:100%;

Answer 2

我尝试在CSS中宽度100%。您是使用bootstrap还是其他类似的框架?

Answer 3

增加行高度和内边距可以正确显示图像。试试这个片段。

 <div class="header">
 <div class="row" style="background-color:black;height:120px;padding:15px;">
 <div class="col-md-5" >
 <h2 style="padding-left:10px;color:white">Online Video Gallery <span 
 class="glyphicon glyphicon-film fa-lg" style="color:black;"></span></h2>
</div>
<div class="col-md-offset-4 col-sm-3">
    <p style="margin-top:20px;">    <input type="text" name="search_box"
    placeholder="Search here">&nbsp;<input type="submit" name="search_btn"
value="Search"></p>
</div>
</div>

Answer 4

我也有同样的问题，但是当我将body margin设置为0 (css code)时，一切都解决了。

header {
    background-color: #04082E
}
body {
    background-color: #447695;
    background-image: linear-gradient(#447695,#359D93,#BFE6EF);
    color: #EEBD6B;
    min-height: 100vh;
    text-align: center;
    font-family: 'Arvo';
    margin: 0
}

这是我的示例代码，如果你想参考。输出将与您在html中定义的.header类相同。在我的例子中，我的html代码我只使用header标签。

<header>
    <img class="logo" src="img/VL logo.png" />
</header>