使用引導程序創建標題圖像

要了解有關Web開發的更多信息，我正在嘗試製作一個Web應用程序。使用引導程序創建標題圖像

我的第一個挑戰是如何接口Django，Bootstrap和自定義css。

我想創建一個導航欄，包括圖像，我可以覆蓋一個個人資料圖片，鏈接到您的帳戶設置等，我想它看起來像下面的圖片：

本質上，它將是一個響應式導航欄，其高度設置爲200px，寬度始終爲瀏覽器窗口的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樣式表（如在其他答案建議）。這是工作之前（因爲我測試它與簡單的字體大小等），所以不知道這是否是必要的。

來源

2016-11-03 PaulBarr

你想RESI像圖片一樣的個人資料圖片？ –

沒有（我只是屏幕抓住了一個圖像，並有錯誤地打開調整大小選項），我基本上尋找一個響應式標題圖像，其他一切保持不變，但通過一些輕微的放大或縮小，你可以保持圖像不拉伸。 – PaulBarr

首先我會回答你關於混合事物的問題。

當您使用Django時，這意味着您有一個Django應用程序呈現一些html並將其發送到客戶端以在瀏覽器中顯示它。這個html使用bootstrap來提供一致的響應式樣式。引導程序所做的是將一些CSS應用於您的html。但是，如果bootstrap提供的功能不夠用，您可以隨時包含自己的自定義css，並且沒有任何問題。

關於你的頭，我將有一個自舉行與背景圖像和填充一個山坳，包括圖像做：

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

來源

2016-11-03 21:42:02

感謝您將三種形式和我的問題混合在一起的幫助。實際上，我仍然遇到麻煩 - 我將顯示更新後的HTML和CSS。目前，圖像仍然太大，它已經抵消了右側。 – PaulBarr

使用引導程序創建標題圖像

回答

相關問題