html - Bootstrap Logo 没有响应

Question

如果我缩小我的屏幕尺寸，标志要么非常小，在手机上工作，要么非常大，在台式机上工作，看起来很模糊。如何让 Logo 在所有屏幕尺寸(包括平板电脑)上流畅显示？ Logo 尺寸为 793 x 150 像素，是一个宽 Logo 。这个大小就是上传到服务器上的大小，当然它在实际站点上要小得多，所以它适合导航栏。

Logo 是这样添加到 HTML 中的:

<a class=navbar-brand href=http://example.com/><img src="http://example.com/resources/imgs/logo.png" alt="Example"></a>

CSS:

header .navbar-brand {
    padding-top: 7px;
    padding-bottom: 7px
}
header .navbar-brand>img {
    height: 46px
}
header .navbar-brand>img {
        height: auto;
        width: 135px
}

Answer 1

将img-responsive 类添加到img 标签。并根据需要为 anchor 标记设置特定宽度。

<a class=navbar-brand href=http://example.com/><img src="http://example.com/resources/imgs/logo.png" alt="Example" class="img-responsive"></a>

CSS:

.navbar-brand {
   max-width: 60px;
}

img-responsive类应用max-width: 100%;, height: auto;并将 display: block; 显示到图像上，以便它可以很好地缩放到父元素。

在这里阅读更多相关信息:

http://getbootstrap.com/css/#images-responsive

查看您的网站并进行以下更改:

从中删除代码

自定义.css 第 699 行

header .navbar-brand > img {
   height: 200px;
}

样式.css 5105

.navbar-brand > img {
    display: block;
}

使用这个:

样式.css 2091

.navbar-brand {
    float: left;
    padding: 12px 15px;
    font-size: 19px;
    line-height: 21px;
    height: 62px;
    max-width: 200px;
    display: table;
}

编辑 html:

<a class="navbar-brand" href="http://soldmymac.com/"><span><img src="http://soldmymac.com/resources/imgs/logo.png" alt="Sold My Mac" class="img-responsive"></span></a>

并添加CSS:

.navbar-brand span {
   display: table-cell;
   vertical-align: middle; // This will keep the logo vertically in the middle
}

还有最后一件事......

如果有时间就学习 CSS。很简单。