使用引导程序创建标题图像答案

【问题标题】：Creating a header image with bootstrap使用引导程序创建标题图像
【发布时间】：2017-03-17 15:09:03
【问题描述】：

要了解有关 Web 开发的更多信息，我正在尝试制作一个 Web 应用程序。

我的第一个挑战是弄清楚如何连接 Django、Bootstrap 和自定义 css。

我正在尝试创建一个导航栏，其中包含一个图像，我可以在其中覆盖个人资料图像、指向您的帐户设置的链接等。我希望它看起来像下图：

本质上它是一个响应式导航栏，其高度设置为 200 像素，宽度始终为浏览器窗口的 100%。

我的自定义 CSS 如下：

.wide {
  width:100%;
  height:100%;
  height:calc(100% - 1px);
  height:200px;
  background-size:cover;
}

我已经尝试将它与下面的 HTML 接口：

<head>
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1">
     {% load static %}
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="/static/mapvpage/style.css">


  </head>


  <body>

<div class="wide">

<img src="{% static "mapvpage/BananaFarm.jpg" %}" alt="My image"/>
    <div class="col-xs-5 line"><hr></div>
    <div class="col-xs-2 logo">Logo</div>
    <div class="col-xs-5 line"><hr></div>
</div>
</body>
</html>

我已将图像放入我的页面。但是我无法弄清楚如何以任何方式更改图像大小。对于自定义 CSS 如何与 Bootstrap 和 Django 交互，我也有点困惑。当我想要不同的元素时，我可以混合使用 Bootstrap 和自定义 CSS 吗？

非常感谢您的帮助，我已经为此工作了一段时间，但一无所获，因此不胜感激！

更新：

CSS：

#header {
    background-image:url("paper.gif");
    max-width:100%;
    max-height:auto;
}

HTML：

 <head>
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1">
     {% load static %}
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="{% static "mapvpage/style.css" %}">


  </head>


  <body>

<div class="row" id="header">
    <div class="col-md-3 col-md-offset-9">
        <img src="{% static "mapvpage/BananaFarm.jpg" %}" alt="My image"/>
    </div>
</div>
</body>
</html>

注意我以不同的方式加载了 CSS 样式表（如另一个答案中所建议的那样）。它以前可以工作（因为我用简单的字体大小等对其进行了测试）所以不确定是否有必要。

【问题讨论】：

你想像图片一样调整个人资料图片的大小吗？
不（我只是在屏幕上抓取了一张图片并错误地打开了调整大小选项），我本质上是在寻找一个响应式标题图片，其他一切都保持不变，但通过稍微放大或缩小你可以保留图像而不拉伸它。

标签： html css django image twitter-bootstrap-3

【解决方案1】：

首先我会回答你关于混合的问题。

当您使用 Django 时，这意味着您有一个 Django 应用程序，该应用程序呈现一些 html 并将其发送到客户端以在浏览器中显示它。此 html 使用引导程序以提供一致且响应式的样式。 bootstrap 所做的是将一些 css 应用到您的 html 中。但是，如果 bootstrap 提供的功能还不够，您可以随时包含自己的自定义 css，这没有问题。

关于您的标题，我会使用带有背景图像的引导行和带有填充的 col 来包含图像：

<div class="row" id="header">
    <div class="col-md-3 col-md-offset-9">
        <img src="{% static "mapvpage/BananaFarm.jpg" %}" alt="My image"/>
    </div>
</div>

然后，您需要将标题的背景图像添加到标题 div：

#header {
    background-image:url("paper.gif");
}

您可以轻松找到更多属性添加到标题 css 以使图像居中，将其展开以填充整个 div...

【讨论】：

感谢您对混合三种表格和我的问题的帮助。我仍然无法实际获得结果 - 我将展示我更新的 HTML 和 CSS。目前图像仍然太大，并且已经向右侧偏移。