【Bootstrap】Navbarのロゴ画像サイズを調整したい

Question

bootstrap3です。

超初心者で恐縮です。
見よう見まねでナビバーを作りました。

ナビバーの左上にロゴ画像を入れました。
ロゴ画像はまだ作ってないため、イメージ確認としてgoogleロゴ（550 × 220）で代用しました。

<div class="row">
      <a class="navbar-brand" href="/"></a>
      <form action="/items" accept-charset="UTF-8" method="get" id="header_form">
        <div class="input-group">
          <form action="/items" accept-charset="UTF-8" method="get"><input name="utf8" type="hidden" value="&#x2713;" />
            <input value="" class="form-control" placeholder="何かお探しですか？" id="header_text_keyword" type="text" name="search[keyword]" />
            <input type="hidden" name="search[paused]" id="search_paused" value="false" />
</form>          <div class="input-group-btn">
            <button class="btn btn-default" type="submit" id="header_search_button">
              <i class="glyphicon glyphicon-search"></i>
            </button>
          </div>
        </div>
      </form>
    </div>

.navbar-brand {
  background: url("/logo.png") no-repeat left center;
  background-size: contain;
  height: 50px;
  width: 100px;
}
#header_nav {
  background-color: white;
  border-color: #b8bbbf;
  border-style:solid;
  
}

#header_form {
  padding-top: 9px;
}

#header_nav a{
  color: #F47B20;
}

#header_nav li{
  display: inline-block;
}

結果↓

ロゴが小さいため、ちょっと幅を広くしようと思い、CSSを以下のように
.navbar-brandのwidth100から150にしました。

width: 150px;

すると下のようにテキストボックスとの間にけっこうな余白が出来てしまいました。
テキストボックスぎりぎりまで広げたいのですが、どうすれば良いのでしょうか？

Answer 1

背景領域が画像より大きいのではないですか？

background-size: cover;に変更するとどうです？

もしくは、heightをwidthと同じ比率分大きくする

Comments

[pecchan]

有難う御座います
background-size: cover;
でテキストボックス近くまで広がりました。

もしよろしければ、もう1点教えていただけないでしょうか？
>背景領域が画像より大きい
「背景領域」とはアイコンの「絵」そのもの部分ではなく、絵の背景にあたる部分ということでしょうか？

[pecchan]

background-size: cover;
については自分で調べてみます！

[akihiro3]

.navbar-brandのサイズ（背景領域）が150×50に対して,
logo.pngのサイズが100×50の場合、
background-size: contain; だと余りは余白になります

[pecchan]

有難う御座います。
意味が分かりました！