Bootstrapを使用したナビゲーションバーでロゴ部分が歪む

Question

分からないこと

Bootstrap4を使用し、ナビゲーションバーに、作成したロゴ画像を添付しています。
しかし、画像全体が楕円状になってしまいます。楕円状ではなく、長方形の形式で画像表示を試みたいのですが、やり方がわかりません(楕円になっている原因がわからない)。わかる方いらっしゃいますでしょうか。

ソース

私が作成したソースは、このようになっています。HTMLをslim形式で記載しています。画像の指定は、3行目です。

nav.navbar.navbar-light.navbar-default.navver-static-top
  = link_to root_path
    = image_tag "Tube-logo-color.png", :size => "126x65"
  button.navbar-toggler aria-controls="navbarNav" aria-expanded="false" aria-label=("Toggle navigation") data-target="#navbarNav" data-toggle="collapse" type="button" 
    span.navbar-toggler-icon
  #navbarNav.collapse.navbar-collapse
    ul.navbar-nav

以下、Bootstrapの公式を参考にし、上記のslimを記述しています。

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

Comments

[miyabi_pudding]

slimってことは、Railsを使用してるんでしょうか？
一応、slimやRailsの質問タグもつけた方がいいかと。
どうにもBootstrapだけが原因とは言い難いような気がします。

[T.Adams]

ご指摘ありがとうございます

Answer 1

「slim」や「Ruby on Rails」について、知識がないため、見当違いかもしれませんが

CSS観点でいうと、以下の組み合わせのときに添付画像のような見た目になるような気はします。

• border-radius + overflow: hidden;
• border-radius + background-image

ロゴを表示するHTML付近に上記のようなCSSが指定されていないかを確認してもいいかもしれません。

Comments

[T.Adams]

CSSを付けていないと誤った情報を記載しました。CSSが付与されていました。下記記載をなくしたら、正常に表示されました。

// 画像サイズ
img {
border-radius: 50%;
}