我不认为这个问题有一个单一的答案，但我会试图阐明一些你的选择。
使用Bootstrap，您可以将.img-responsive类添加到图像中，以使其根据页面宽度调整大小。
通过添加.img-responsive类，Bootstrap 3中的图像可以变得响应友好。这将max-width: 100%;、height: auto;和display: block;应用于图像，以便它可以很好地缩放到父元素。
现在我将更进一步--拥有两张不同的图片。这与其说是台式机和移动的设备的区别，不如说是屏幕分辨率的区别。例如，视网膜屏幕将以更高的分辨率显示图像。许多人提供两张不同的图片，一张是正常分辨率，另一张是视网膜屏幕分辨率的两倍。
This tutorial强调了一些为Retina屏幕准备图像的方法，包括提供一个缩小的源图像或使用CSS Media Queries来更改图像的src。我还要补充的是，使用CSS Media Queries来更改图像的src并不一定意味着用户必须下载同一图像的两个版本。

Bootstrap的responsive image类将max-width设置为100%。这限制了它的大小，但并不强制它拉伸以填充比图像本身更大的父元素。你必须使用width属性来强制放大。
http://getbootstrap.com/css/#images-responsive
多亏了伊舍尔伍德

<img src="http://www.jpl.nasa.gov/spaceimages/images/mediumsize/PIA17011_ip.jpg" class="img-responsive" alt="Responsive image">

添加类

img-responsive

您的图像
添加两张图片应该会更好。但是很多浏览器不知道你的小图片是为了响应（希望这很快会改变）。所以他们必须加载两张图片。这是沉重的（和缓慢）加载。
现在最好还是将类添加到映像中。

你现在的图片，使用高度：100%和宽度：自动，应该会保持导航栏的大小。导航栏默认为50px高，无论你有什么设备。

覆盖此类

.navbar-brand {
  padding: 0px;
}
.navbar-brand>img {
  height: 100%;
  padding: 15px;
  width: auto;
}

在bootstrap中有一个类使图像具有响应性。
类为img-responsive
把这个添加到你的img标签中，图像就会有响应。

我更喜欢另一个解决方案。创建另一个类logo-navbar：

<a class="navbar-brand js-scroll-trigger" href="#page-top">
    <img class="logo-navbar" src="img/logo-1-img-black.png">
</a>

并将相关宽度应用于菜单字体大小：

img.logo-navbar {
    width: 2rem !important;
    height: 2rem !important;
}

这样，您的徽标将始终与您的导航栏内容进行调整。