Html 如何用twitter引导导航栏上的图像替换品牌文本？

我尝试用图像替换品牌文本，如我的示例索引页面中所示。但是，这会导致导航中断为两条线，标志图像位于其自己的线上。我怎样才能解决这个问题？以下是显示问题的页面：

这是一个页面，显示了它应该是什么样子（在我将文本徽标更改为图形徽标之前）

工作示例：

我只是用了这个：

<a class="navbar-brand" href="#"><img src="http://www.clearsoftinc.com/Clearsoft/public_html/img/new_logo_white.png" style="width: 50px; height: 20px;" /></a>

---

要在您的站点上也能实现这一点，您必须将“navbar品牌”添加到a标签中。

我认为这是问题的根源

<img src="img/new_logo_white.png" width="15%" alt="Clearsoft Home">

不要在图像上使用

width=“%15”

。相反，将图像大小调整为您想要的大小，并使用较小的图像（在您的情况下为112 x 25）。包装

为744px宽的图像腾出空间，但在

标签上，您将其缩小到原始尺寸的15%

请参见此屏幕截图：

---

另外，这只是一个坏主意，因为网站仍然需要请求并下载大文件，然后调整其大小。如果你自己制作一张较小的图片并引用较小的图片，你的网站就会更快。

这只是一个例子。

.logo{
  width: 95px;
  margin-top: 15px;
}