Bootstrap响应式图像尝试在Safari，Chrome，FF中表现不同

Question

我正在尝试设置一个适合网站导航栏的图像并用作徽标。我遇到的问题是它在三种主要浏览器中显示不同。

明确地说，当我使用height属性并使图像在FF中显示良好时，它对于Safari来说变得太大了，反之亦然。谈到Chrome，行为甚至更奇怪。出于某种原因，它只是拒绝承认相关的类存在。当我签入Page Source Code并导航到有问题的CSS时，该课程不存在。缺少的类在下面的代码中称为.logo-img。

HTML：

<nav class="navbar navbar-default">
            <div class="container">
                <div class="navbar-header">
                    <a href="index.html" class="navbar-brand"><img src="{% static "tshirt-theme/img/logo-kindbook.png" %}" class="logo-img" alt="Shirt Store"></a>
                    <div class="navbar-buttons">
                        <button type="button" data-toggle="collapse" data-target=".navbar-collapse" class="navbar-toggle navbar-btn">Menu<i class="fa fa-align-justify"></i></button>
                    </div>
                </div>

为简洁起见，省略了休息

CSS：

.navbar-default {
  background-color: #ffffff;
  border-bottom-color: transparent;
}
.navbar-default .navbar-brand {
  color: #333333;
}

img.logo-img {
    height: 300%; !important
}

.logo-img > img {
    height: 300%; !important
}

请原谅!important，因为我正在使用它来尝试排除故障和黑客攻击。

火狐：

Safari浏览器：

铬： 图像会爆炸到全分辨率并占据整个页面。

问题是为什么会发生这种情况（特别是Chrome没有注册CSS类），我怎么能想出一些跨浏览器兼容的东西？

Answer 1

如果您使用的是bootstrap 3，则应缩小图像大小，然后删除intment.填充。

有关详细信息bootstrap navbar

navbar-brand

.navbar-brand {
  padding: 0px !important;
}
.largeImg .navbar{
 min-height:151px;
}
.largeImg .navbar-nav>li>a{
padding-top:65px;
padding-bottom:65px;
}