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类代码：

.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

我也有同样的问题，但是当我将正文边距设置为 0（css 代码）时，一切都解决了。

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>
    <img class="logo" src="img/VL logo.png" />
</header>

适合背景标题图像

4 个答案: