Bootstrap：導航標誌大小

我有一個1700x700的標誌和我的導航欄高度是70.我想自動調整大小，並將其適應我的導航欄高度。我可以用photoshop將其大小調整爲170x70，但問題在於放大時圖像質量下降。Bootstrap：導航標誌大小

我試着用img-responsive但不起作用。

謝謝！

<a class="navbar-brand" href="index.php"></a> 



.navbar-brand 
{ 
    position: relative; 
    background: url(../images/logo.png); 
    width: 170px; 
    left: 15px; 
}

來源

2016-11-05 Asez

您可以設置下面的CSS此

.navbar-brand { 
    position: relative; 
    background: url(../images/logo.png); 
    width: 170px; 
    left: 15px; 
    background-size: contain; 
}

來源

2016-11-05 08:42:21

謝謝！它現在可以工作，但我的標誌位於導航欄的頂部。你有沒有關於如何居中（作爲身高）的理念？ – Asez

爲了對齊，您可以使用background：url（../ images/logo。png）中心; –

-3

你有沒有下面的一個，你不需要給任何外部CSS。

在圖像上使用class =「img-responsive」。

<a class="navbar-brand" href="#"><img alt="Brand" src="images/logo.png" class="img-responsive" /></a>

來源

2016-11-05 08:42:30 Pramodkumar

請檢查你的語法。你是什麼意思，「你下面的一個你不需要給任何外部的CSS」？ – Abk

給您的標誌max-height，使值是像這樣的導航欄的高度...

.navbar-brand 
{ 
    position: relative; 
    background: url(../images/logo.png); 
    width: 170px; 
    left: 15px; 
    max-height: 70px; /* height of the navbar */ 
}

來源

2016-11-05 08:42:34 Abk

你可以使用這個CSS

背景： url（../ images/logo.png）無重複滾動中心/包含;

來源

2016-11-05 09:09:09

最好的選擇是在Photoshop中調整徽標大小（或類似）。

當然，如果以較少的像素顯示，它會失去分辨率，但是如果您加載一個大標誌，然後通過css調整大小，效果將會相同，並且您的頁面將需要更多時間才能加載。

來源

2016-11-05 09:09:16 JGonDev

同意ABK儘可能最大高度的CSS，但我認爲JGonDev調整圖像大小是從性能角度來看的正確方向。你真的應該只使用CSS來設計你的網站。它不應該被用來破解你的代碼來強制所需的願望。

就調整大小而言，大多數新開發人員無法訪問像Photoshop這樣的優秀設計工具，但如果可以的話，您將無法使用！對於Mac用戶，Preview可以完成調整圖像大小的工作。

在預覽打開圖像 - 轉到工具/ AdjustSize：

那麼您可以在寬度或高度更改爲所需的大小。確保按比例檢查比例！這將確保您的圖像不會偏斜。

調整大小後，點擊「確定」按鈕。文件保存。

**注意 - 請確保將您的文件保存爲不同的文件，即navbar-logo.png或類似的文件，以便您可以輕鬆記住圖像在代碼中的用途。

調整圖片大小將減少整體網站的膨脹和大小，並改善您網站的整體表現。

來源

2018-01-10 02:27:57

Bootstrap：導航標誌大小

回答

相關問題