調整引導程序導航欄品牌標識保持比例

Question

我想知道是否有辦法對導航欄品牌徽標圖像進行動態調整以獲得導航欄本身的精確高度並計算保持圖像比例的寬度。

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <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 alt="Brand" src="images/logo.png"></a>
    </div>

我試着編輯bootstrap .css添加：

.navbar .brand > img { max-height: 40px; }

要么：

.navbar .brand { 
    max-height: 40px;
    max-width: 30%; 
    overflow: visible;
    padding-top: 0;
    padding-bottom: 0; 
}

沒有運氣，圖像保持相同的巨大尺寸。

第一個應該做的伎倆，我希望這些設置應用於帶有navbar-brand類的標簽內的img標簽內，但是，即使正確刷新了css，這些設置也不會應用於我的圖像。

Answer 1

在您提供的CSS中，您可能引用了錯誤的類名。 您需要覆蓋.navbar-brand類，但是您在.navbar中引用了.brand類名。 因此，樣式不會應用於您想要的元素。

另外，你是否嘗試在圖像上使用class="img-responsive" ？

<a class="navbar-brand" href="#"><img alt="Brand" src="images/logo.png" class="img-responsive" /></a>

否則，請查看此Stackoverflow文章，因為它類似於： 帶有徽標的Bootstrap 3 Navbar 。

希望這有助於你的事業。

Answer 2

我不知道，但這適用於bootstrap css

@media（*在這里你指明屏幕尺寸）{//在這里你指明圖像圖標類或屬性然后你可以指定你想要的尺寸縮小的圖像尺寸}