imgタグで表示しているsvg画像の表示がGoogle ChromeとSafariで異なる

Question

以下のようなコードで、メニューの文字の下にsvg画像を表示しています。

  <ul class="menu_header">
    <li class="menu_link"><a href="/kensaku">検索</a><img src="/img/kensaku_icon.svg"></li>
    <li class="menu_link"><a href="/myster">ドアの選び方</a><img src="/img/door_icon.svg"></li>
    <li class="menu_link"><a href="/jirei">施工事例</a><img src="/img/jirei_icon.svg"></li>
    <li class="menu_link"><a href="/guide">ご利用ガイド</a><img src="/img/gaide_icon.svg"></li>
    <li class="menu_link"><a href="/info">お問い合わせ</a><img src="/img/mail_icon.svg"></li>
  </ul>

cssは以下のような感じです。

.menu_header{
  background: #ff8226;
  text-decoration: none;
  list-style: none;
  display: flex;
  justify-content: center;
  width: 100%;
}

.menu_link{
  border-left: 1px solid white;
  width: calc(100% / 6);
  text-align: center;
  padding: 7px 0;
  display: flex;
  flex-direction: column;
}

.menu_link a{
  color: white;
  text-decoration: none;
  font-weight: bold;
}

.menu_link img{
  margin-top: 5px;
}

.menu_link:last-child {
　 border-right: 1px solid white;
}

このコードで、macのGoogle ChromeとSafariでそれぞれ確認してみたところ、以下のような状態になりました。

---

Google Chrome

---

Safari

---

理想はSafariの表示なのですが、確かにこのコードだと、imgタグに一切サイズ指定をしていないため、Chromeの表示崩れの方が正しい？というか、納得はできます。
imgにサイズ指定をすればChromeの表示自体は治るのだろうと思いますが、なぜ同じコードなのにこのような差が出てしまうのか？という点が気になった為、質問させていただきました。
問題の切り分けがうまくできていない為、他に判断材料として必要な情報がございましたらご指摘ください。
よろしくお願いいたします。

Answer 1

display: flex ではデフォルトで align-items: stretch なので、flex-direction: column ならば中のフレックスアイテムは横方向に伸ばされます。Chrome は置換要素の aspect-ratio を尊重しつつ縦方向も伸ばすようです。

.menu_link に align-items: center を指定すれば Chrome も Safari と同様の挙動になると思います。

Comments

[Fushi_me]

お返事が遅くなってしまい申し訳ございません。flexboxの関係だったのですね・・！aspect-ratioというプロパティを初めて知ったので、調べてみようと思います。align-items: centerで、Chromeも適切な大きさで表示することができました。大変助かりました。ありがとうございます。