适合背景标题图像答案

【问题标题】：fit background header image适合背景标题图像
【发布时间】：2016-10-27 17:01:56
【问题描述】：

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

请看下图：

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

我希望图像适合全屏显示，而不会像我们缩小浏览器窗口大小时那样进行任何剪切。谢谢！！

代码：

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

【问题讨论】：

标签： css image header background-image

【解决方案1】：

试试bacground-size:cover;。

如果它不起作用，请将图像的宽度设置为 100%。点赞：width:100%;

【讨论】：

试过了。我用代码编辑了帖子，请检查并纠正我。谢谢
我猜有一些不必要的填充和边距。将它们设置为零。 .heading {padding:0; margin:0;} 删除背景大小属性。如果仍然不起作用，请添加通用选择器。像这样：*{padding:0; margin:0;}
仍然不起作用，如果我删除它不适合 100% 宽度的背景大小。我只显示 90% 的宽度。
通用选择器工作正常。检查这个：link.
如果您使用的是引导程序，请将您的 row div 放在另一个带有 container-fluid 类的 new div 中。

【解决方案2】：

我会在 CSS 中尝试 100% 的宽度。您使用的是引导程序还是其他类似的框架？

【讨论】：

我正在使用引导程序。我试过宽度：100%；已经。我已经用代码编辑了帖子，请检查。

【解决方案3】：

增加行的高度和内边距将正确显示图像。试试这个 sn-p。

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

【讨论】：

没用。它仍然看起来像这样：imgur.com/32ShToI，这就是我希望图像在全窗口屏幕上显示的方式：imgur.com/3L0UHCN

【解决方案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 标签。

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

【讨论】：