Question

如果缩小屏幕尺寸，徽标将非常小，可以在手机上使用，也可以在手机上使用，也可以在台式机上工作，看起来很模糊。如何使徽标在包括平板电脑在内的所有屏幕尺寸上都流畅？徽标大小为793 x 150像素，是一个宽徽标。这个大小就是上传到服务器上的内容，当然它在实际网站上要小得多，所以它适合导航栏。

徽标以HTML格式添加：

＆＃13;

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

＆＃13;

CSS：

＆＃13;

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

＆＃13;

Answer 1

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

<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; and display: block;应用于图片，以便它可以很好地扩展到父元素。

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

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

查看您的网站，请执行以下更改：

从

中删除代码

custom.css第699行

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

style.css 5105

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

使用此：

style.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。这很容易。

Bootstrap徽标没有响应

1 个答案: