【akito 様】画像の表示がおかしい

スマホとパソコンで画像の幅が違う （パソコンだと小さい） というご相談を頂きました。

画像の表示がおかしい

スマホでは見出しの下にある画像が見出しの幅に沿って適切に表示されるのですが、パソコンだと画像のサイズが見出しに合っておらず、不自然になります。もしよろしければ、画像を正しく表示させる方法などを教えて頂きたいです。よろしくお願いします。

レスポンシブサイトだとそのようになります

akito様
ご相談ありがとうございます。

現在、WordPressサイトのほとんどがレスポンシブWebデザインと言っても良いでしょう。

このレスポンシブというのは、スマホとパソコンで別のサイトを表示させるのではなく、1つのデザインを幅可変にしてPC/スマホ/タブレットの端末の画面サイズに合わせてコンテンツや画像を最適化する考え方です。

実際、表示されている画像はスマホとPCで同一のものではありますが、幅の小さいスマホでは、PC画面で表示されている画像がスマホ画面サイズに縮小されて表示されています。

そのため、回答としては、「PCサイトのコンテンツ幅以上のものをメディアで挿入する（大きめの画像を貼る）」ということになります。

メディアは挿入する際に サムネイル・中・大・フルサイズを選択できます。大のサイズをいくつに設定しているかどうかは、設定＞メディア で確認できます。

現在お使いのテーマですと、パソコンサイトで見出しは704pxとなっております。

他、「パソコン画面で小さい画像を無理矢理大きく表示させる（CSSで幅を100%にする）」という方法もあるのはあるのですが、画像を引き延ばすのは表示が劣化するだけですので推奨できるやり方ではありませんし、レスポンシブで端末サイズが変わった時のCSSの指定方法を学ばなくてはいけません。
（勉強する際は「CSS メディアクエリ」などで検索すると良いでしょう。）

参考にして頂ければ幸いです。