使用引導程序使徽標圖像響應

我正在使用bootstrap作爲網站標題。如果我想讓網站的徽標響應，我是否應該有兩個徽標圖像（一個用於桌面，另一個用於手機），還是應該調整圖像徽標？什麼是最好的方式來獲得它？謝謝。這是我的代碼：使用引導程序使徽標圖像響應

<nav class="navbar navbar-default navbar-fixed-top"> 
    <div class="container-fluid"></div> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand" href="#"><img src="~/Content/images/logo.png" /></a> 
    </div> 

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
     <ul class="nav navbar-nav navbar-right"> 
      <li class="active"><a href="/">Home</a></li> 
      <li><a href="~/About/Index">About</a></li> 
      <li><a href="~/Contact/Index">Contacts</a></li> 
     </ul> 
    </div> 

</nav>

來源

2015-05-04 D.B

你可以使用寬度爲標誌，使其得到調整大小和高度自動100％。 –

我只是將class =「img-responsive」添加到我的圖像類中。然後，您可以測試您的頁面加載時間，並且如果您認爲圖像的大小差異會使其足夠提高以證明添加較小分辨率的圖像和邏輯來支持，那麼請執行此操作。 –

寬度：100％與從引導添加img-responsive類相同 –

我不認爲這個問題有一個單一的答案，但我會盡量闡明你的選擇。

使用Bootstrap，您可以將.img-responsive類添加到圖像，以便使其與頁面寬度一起調整大小。根據Bootstrap's documentation：

通過添加.img-responsive類，可以使Bootstrap 3中的圖像響應友好。這適用於max-width: 100%;,height: auto;和display: block;圖像，以便它很好地縮放到父元素。

現在我會更進一步 - 有兩個不同的圖像。這與桌面與移動無關，因爲它是屏幕分辨率。例如，視網膜屏幕將以更高的分辨率顯示圖像。許多人提供兩種不同的圖像，一種是正常分辨率，另一種是視網膜屏幕的兩倍。

This tutorial重點介紹了一些準備Retina屏幕圖像的方法，包括提供一個源圖像，然後縮小尺寸或使用CSS Media Queries更改圖像的src。我還會補充說，使用CSS Media Queries來更改圖像的src並不一定意味着用戶將不得不下載同一圖像的兩個版本。

來源

2015-05-04 12:27:09

好。謝謝。我會考慮爲視網膜顯示器做好準備。 –

類

img-responsive

添加到您的圖像

添加兩個圖像應該會更好。但很多瀏覽器都不認識到你的較小圖像是用於響應的（希望這會很快改變）。所以他們必須加載2張圖片。負載較重（較慢）。

現在，只需將該類添加到您的圖像中仍然更好。

來源

2015-05-04 12:23:24

在bootstrap中有一個類使圖像響應。

類是img-responsive

添加到您的img標籤，圖像會變得敏感。

來源

2015-05-04 12:24:27

Bootstrap的響應式圖像類將最大寬度設置爲100％。這限制了它的大小，但不會強制它伸展以填充大於圖像本身的父元素。你必須使用width屬性來強制升級。

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

感謝伊舍伍德 DEMO

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

來源

2015-05-04 12:37:28 sheshadri

如果你有像現在，使用高度：100％，寬度：汽車，應該保持它的導航欄的大小。無論您擁有哪種設備，導航欄默認爲50像素高。

來源

2015-05-04 19:07:03 spasticninja

覆蓋這個班

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

來源

2017-07-24 08:26:25 Udara

謝謝，通過使用媒體查詢並覆蓋默認班級，我設法做到了這一點。 –

使用引導程序使徽標圖像響應

回答

相關問題