Bootstrap Navbar Logo 在手机上像素化

Question

我正在使用引导程序创建一个网站，我一直在尝试制作导航栏，除了在我的手机上一切正常，因为徽标变得模糊或像素化，我不确定它是否会自动调整大小，但即使我使用较小版本的徽标，它仍然看起来很模糊。

像这样：Small Logo，Big Logo

它还粘在导航栏的底部，忽略任何填充/边距

我正在使用 pull-left 类，因为它似乎比 navbar-brand 更适用于图像。

html

<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a href="#" class="pull-left"><img src="images/logonavbar.png"></a>
    </div>
    <div id="navbar" class="collapse navbar-collapse">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">LOG IN</a></li>
        <li><a href="#">TOURNAMENTS</a></li>
        <li><a href="#">FAQ</a></li>
      </ul>
    </div><!--/.nav-collapse -->
  </div>
</nav>

css

.pull-left {
    margin-top: 8px;
}

它也可以在我的 mini iPad 屏幕和任何浏览器上完美运行（即使缩小窗口）

这是我的网站：Windfury.net

Answer 1

您需要使用更高分辨率的图像并将其宽度/高度设置为您希望它最终显示的大小。

发生这种情况是因为您的手机的像素比桌面屏幕多。因此，作为补偿，您的手机会拉伸像素以使其在屏幕上填充相同数量的空间。因此，您最终会得到一个模糊的图像，因为图像的 1 个像素！= 手机屏幕上的 1 个像素，通常会更多，具体取决于设备。

一个好的做法是使用一个图像，例如 100x200 像素，然后再使用另一个 200 x 400 像素。然后使用媒体查询将较大的图像缩小到 100 x 200 像素以供移动或高分辨率设备使用。

不过，这需要使用背景图片。如果您只想使用图像标签，您可以只使用单个较大的图像并使用 css width: 100px; height: 200px 正常缩小它 - 唯一的缺点是非高分辨率设备必须下载比必要更大的图像。

以下示例展示了我所说的内容，尽管比例超过了 2 比 1，但考虑到示例中的图像非常小，而 jsfiddle 在移动设备上不是很好。

https://jsfiddle.net/s15swcn0/2/