（Wordpress）ナビメニューが画面サイズによって改行してしまうのを防ぎたいです。

Question

■ 困っていること

運営しているWordpressサイトのナビメニューに、テキストではなく画像を採用しています。
ナビゲーションラベルに画像のパスを挿入し、HOMEボタン等をオリジナル画像で表示しています。

PCなど解像度が大きいデバイスの場合は、ボタンが一列に表示されていて綺麗なのですが、すこしブラウザのウィンドウを小さくすると複数のボタンが次の列に表示されてしまい困っています。

以下、図解です。参考になれば嬉しいです。
![]

■ やりたいこと

メディアサイズに合わせて、ボタンの画像も伸縮させてナビメニューを一列に保ちたいです。
PC、タブレット（横・縦）、スマホのどれでアクセスしても一列のナビメニューを表示できるようにしたいです。

■ これまでにやってみたこと

１. 以下のCSSをボタンの画像に試してみましたが、何も起きず：

	.ボタンのクラス img {width: 100%;}

２. @mediaでメディアサイズ別にサイズの違う同じ画像を用意しようとも考えましたが、どうすればいいかわからず・・・

とりあえず聞いてからにしてみようと思い質問を投稿しました。

■ 補足
動作環境：Mac
Wordpressのテーマ: Luxeritas
サーバ: Mixhost

お力を貸していただければ幸いです。何卒よろしくお願いします。

Answer 1

具体的なコードがないので、ふわっとした一般論的な回答になりますが、メニュー画像の表示をビューポートに合わせて小さくするのがいいだろうと思います。
パーセンテージ指定やvwでの指定、あるいはフレックスレイアウトなどを使うといいのではないでしょうか。

Comments

[Abbrev]

ご回答ありがとうございます！
とても参考になりました！

自分なりにビューポートのことやらvw単位のことやらを調べてみました。CSSでボタンの画像それぞれにvw指定をしてビューポートを割り振ったところ、思っていたように動作しました！ブラウザを小さくしても一列でまとまってくれるので、とても満足しています。

大変助かりました！ありがとうございます！

[Lhankor_Mhy]

お役に立てたようで何よりです