モバイルのロゴがおかしいのはなぜですか

サポート
1

image
実際は 3:1 ですが、1:1 として表示されています。これは SVG です。
image

ロゴ要素のスタイルは、こちらと同じです。

編集: コンポーネントなしでも同様です。

編集#2: SVG の viewBox が原因のようです。Discourse と互換性のある SVG にするにはどうすればよいでしょうか？

2

SVG の viewBox を編集してみてはどうでしょうか？スクリーンショットから推測すると、ロゴ自体は 3:1 の比率なのに、viewBox は 1:1 になっている可能性があります。

3

viewboxの幅と高さの比率は3:1です。デスクトップでは問題ありません。

4

いくつか試してみたところ、viewboxが問題を引き起こしているようです。代わりにその値をheight/widthに移動し、viewboxを削除すると、デスクトップでもモバイルでも同じように動作します。

そこで、SVGをテキストエディタで開き、2行目を以下のように変更しました：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 751.98 200">

から

<svg xmlns="http://www.w3.org/2000/svg" width="751.98" height="200">

へ

なぜモバイルで異なるのか、詳しく調べる必要があります。

5

img の max-height を height に指定するのは問題ありません。しかし、値が生成されてしまうようです。なので、これは解決策ではないと思います :smiley:

6

幅と高さは絶対値を指定しているようですが、ビューボックスはどちらかというと「相対的」な値のようです。
問題ありません。ありがとうございます :smiley: