Twitter bootstrap 引导：导航栏徽标大小

我有一个1700x700的标志，我的导航栏高度是70。我想自动调整大小并使其适应我的导航栏高度。我可以用photoshop将其调整为170x70，但问题是当我放大时图像质量会下降

我试过img responsive，但不起作用

谢谢大家!

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



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

.navbar品牌
{
位置：相对位置；
背景：url（../images/logo.png）；
宽度：170px；
左：15px；
}

您可以为此设置以下css

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

---

你有下面的一个你不需要给任何外部css

在图像上使用class=“img responsive”

给出您的徽标

最大高度

，并将该值设置为导航栏的高度，如下所示

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

你可以使用这个css

---

背景：url（../images/logo.png）无重复滚动中心/包含

最好的选择是在Photoshop（或类似软件）中调整徽标的大小

---

当然，如果它显示的像素较少，它会失去分辨率，但是如果你加载一个大的徽标，然后通过css调整大小，效果将是一样的，你的页面将需要更多的时间来加载。

同意ABK的最大高度css，但我认为JGonDev关于调整图像大小是性能观点的正确方向。你真的应该只使用CSS来设计你的网站。它不应该被用来破解你的代码，以迫使你实现所需的愿望

就尺寸调整而言，大多数新开发人员无法使用像Photoshop这样的优秀设计工具，但如果可以的话，那就太棒了！对于Mac用户，Preview完成了调整图像大小的工作

在预览中打开图像-转到工具/调整大小：

然后您可以将宽度或高度更改为所需的大小。确保按比例检查刻度！这将确保您的图像不会扭曲

调整大小后，单击“确定”按钮。文件保存

**注意-请确保将文件另存为其他文件，即navbar-logo.png或类似文件，以便轻松记住图像在代码中的用途

---

调整图像大小将减少整个网站的膨胀和大小，并提高网站的整体性能

**您的问题最简单的答案是**

.navbar品牌
{
位置：相对位置；
背景：url（../images/logo.png）；
宽度：170px；
高度：15px；
背景尺寸：封面；
背景重复：无重复；
背景位置：中心；
}

您需要的导航栏
将

flex

与

justify content

justify content一起使用，自动将项目调整到位

对齐项目：居中

，这是不言自明的

根据你的需要调整它，陛下

*，
*：之前，
*：之后{
保证金：0；
填充：0；
列表样式：无；
文字装饰：无；
框大小：边框框；
过渡期：3s全部；
}
标题{
背景：#D2DCE1；
z指数：100；
}
导航{
宽度：100%；
显示器：flex；
填充：5px15px；
证明内容：之间的空间；
最大宽度：1366px；
保证金：自动；
边缘底部：10px；
}
#标志{
浮动：左；
宽度：250px；
高度：40px；
背景：url（'https://i.imgur.com/K5bq1MD.png'）左/不包含重复；
}
#标志：悬停{
背景：url（'https://i.imgur.com/Kbbcixn.png'）左/不包含重复；
}
导航ul{
浮动：对；
显示器：flex；
证明内容：周围的空间；
}
李国荣{
浮动：左；
显示器：flex；
利润率：0.20px0；
对齐项目：居中；
证明内容：周围的空间；
}
海军ulli a{
颜色：#000；
不透明度：.6；
显示：块；
字体大小：90%；
字体大小：粗体；
字体系列：Arial；
字母间距：1px；
边框顶部：1.5px实心透明；
边框底部：1.5px实心透明；
}
.主动{
边框底部：1.5px实心#ff7700；
不透明度：1；
}
导航ulli a：悬停{
不透明度：1；
}

谢谢！它现在可以工作了，但我的徽标在导航栏的顶部。你对如何居中（高度）有什么想法吗？对于对齐，你可以使用背景：url（../images/logo.png）center；这种方法将减少页面加载时间+1.