ヘッダーロゴの設定について質問です。PCからみると問題ないのですが、スマホからみると画像が細くなり崩れてしまいます。対処法を教えていただきたいです。よろしくお願いします。
画像の高さを180pxに固定していますよね。この画像の場合、高さが180pxなら幅が480pxになります。そのため、幅が480px以下の端末で見たときに、幅だけはみ出ないように調整されてしまうというわけです。
【解決策1】ロゴ画像の縦横比をキープするためには、以下のCSSを追加すると良いと思います。
#logo img { object-fit: contain; }
【解決策2】480px以下の端末でロゴ画像の高さ指定を解除すればOKです。
@media only screen and (max-width: 481px) { #logo img { height: auto; } }
ありがとうございます!【解決策1】でできました!
WordPressテーマSANGOの質問
ロゴ画像の縦横比が崩れる
ヘッダーロゴの設定について質問です。
PCからみると問題ないのですが、スマホからみると画像が細くなり崩れてしまいます。
対処法を教えていただきたいです。よろしくお願いします。
画像の高さを180pxに固定していますよね。この画像の場合、高さが180pxなら幅が480pxになります。
そのため、幅が480px以下の端末で見たときに、幅だけはみ出ないように調整されてしまうというわけです。
【解決策1】
ロゴ画像の縦横比をキープするためには、以下のCSSを追加すると良いと思います。
【解決策2】
480px以下の端末でロゴ画像の高さ指定を解除すればOKです。