【Rails】Bootstrap header navbar の navbar-brand をロゴ画像に変更する方法

2021.12.042021.08.22

Bootstrapのnavbarで作ったheaderのnavbar-brand部をロゴ画像に変更する方法について。

画像保存先

app/assets/images/logo_set.png

テキストロゴのコード

    <header>
      <nav class="navbar navbar-expand-md navbar-dark bg-dark">
        <a class="navbar-brand" href="/homes">Maker awesome</a>
　　　　　〜省略〜

画像ロゴのコード

    <header>
      <nav class="navbar navbar-expand-md navbar-dark bg-dark">
        <div class="logo_area">
          <a class="navbar-brand" href="/homes"><%= image_tag 'logo_set.png', class: "logo" %></a>
        </div>
　　　　　〜省略〜

classを2つ指定して調整

.logo_area {
  width: 250px;
}

.logo {
  height: 100%;
  width: 100%;
}

ボックスの幅を指定し、その中で100%としました。