Bootstrap Navbar徽標在手機上像素化

Question

我正在創建一個帶有引導程序的網站，我一直在嘗試導航欄，並且除手機外，其他所有功能均正常運行，因為徽標變得模糊或像素化，我不確定它是否會自動調整大小，即使我使用的是較小的徽標版本仍然顯得模糊。

像這樣： 小徽標 ， 大徽標

它還會粘貼在導航欄的底部，而忽略任何填充/邊距

我正在使用左上角類，因為它似乎比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;
}

它也可以在我的迷你iPad屏幕和任何瀏覽器上完美運行（即使縮小窗口時）

這是我的網站： Windfury.net

Answer 1

您需要使用分辨率更高的圖像，並將其寬度/高度設置為您希望最終顯示的尺寸。

發生這種情況是因為您的手機比台式機屏幕上的像素更多。 因此，為補償起見，您的手機會拉伸像素以使其填充屏幕上相同的空間。 因此，您最終得到的圖像模糊不清，因為手機屏幕上的圖像只有1像素！= 1像素，根據設備的不同，通常還會更多。

遵循的一種良好做法是制作一張圖像，例如100x200像素，然后再制作200 x 400px。 然后，使用媒體查詢將移動或高分辨率設備的較大圖像縮放到100 x 200px。

但是，這將需要使用背景圖像。 如果您只想使用圖片標簽，則可以只使用單個較大的圖片，然后使用css width: 100px; height: 200px通常將其縮小width: 100px; height: 200px width: 100px; height: 200px像素-唯一的缺點是非高分辨率設備將必須下載比必要尺寸更大的圖像。

下面的示例展示了我在說什么，盡管比例超過了2：1，但考慮到示例中的圖像很小，並且jsfiddle在移動設備上並不是很好。

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