PC表示の場合、固定ページで表示可能な横幅領域は800pxです。スマホ表示の場合、一番小さいiPhone4で表示した場合、表示可能な横幅は290pxです。
1200×500ピクセルの大きい画像（青）と200×80ピクセルの小さい画像（赤）を使った場合、直接<img>タグにcssを記述したらどのような表示になるのか参考までに掲載いたします。

実寸でそのまま表示

<img src="画像ファイル名" alt="サンプル画像" />　と記述した場合、ページの横幅関係無しに画像本来の大きさで表示される。

大小サイズ関係無く、横幅いっぱい表示

<img src="画像ファイル名" style="width:100%;" alt="サンプル画像" />　と記述した場合、ページの横幅いっぱいに合わせて拡大・縮小表示される。

画像表示の横幅の上限を決める

<img src="画像ファイル名" style="max-width:100%;" alt="サンプル画像" />　と記述した場合、ページの横幅に対して最大100%まで表示が許容される。ページの横幅より大きい画像はページの横幅に合わせて縮小表示され、ページの横幅より小さい画像は特に拡大・縮小表示はされずそのまま表示される。

画像の中央寄せ表示

<img style="display:block;margin:auto;max-width:100%;" src="画像ファイル名" alt="サンプル画像" />　と記述した場合、画像を中央に表示できる。表示する画像がページの横幅より大きかった場合はページの横幅に合わせて縮小表示される。

画像にリンクをつける

<a href="http://masuo2-pp-kids.com/"><img src="画像ファイル名" alt="サンプル画像" /></a>　と記述した場合、画像にリンクをつけることができる。

画像＋文字にリンクをつける

<a href="http://masuo2-pp-kids.com/"><img src="画像ファイル名" alt="サンプル画像" style="vertical-align:middle;" />リンクリンク</a>　と記述した場合、画像とテキストの高さの中心を揃えることができ、<a>タグで挟むことでリンクをつけることもできる。
リンクリンク