現在、基本幅を960pxとしています。
（わかりやすく灰色部分を960pxとしていますが、実際は白）
960pxは、PC版の画面幅の中でよく使われているサイズです。
webで使われる画像は72dpiで、px数によって表示サイズが決まります
画像は比率4:3で、400px×300pxのサイズで作成していますが、(960px / 4) - (隙間 * 3) = W222 x H166.5で表示されています
4分割して表示するのであれば、W222 x H166.5あれば正常に表示できるということになります。
しかし、モバイル版を考慮すると大き目に作成しておいたほうがよいです
例えば、iPhoneSEだと画面サイズが横375pxなので、両端の隙間（各24px x 2）を考慮しても最低幅327px以上ほしいということになります。
下の画像は1600x900pxのサイズで作成していますが、
最大幅960pxで表示されると、(960px / 1600px) = 0.6倍に縮小されます。
これを、幅100%で表示すると、そのときのブラウザの横幅によって画像が伸縮します。
画像の比率を維持するため、高さも変化します。
次は、高さを100％に合わせてみます。
高さを100％にする場合、画像の横幅が変化するため、ブラウザ幅によって比率が崩れてしまいます。
通常、これはよろしくないので、高さを100％にした場合は両幅を削る処理を行います。
画像の比率を維持するために、両端を切り落としています。
この場合、ブラウザ幅がせまくなるほど、両端が切り落とされていき、モバイルの表示では猫ちゃんの顔が半分見切れてしまいます。
こういったケースを防ぐため、高さ100％合わせの場合はPC版（横長）とモバイル版（経長）の画像を用意しておく必要があります。
■WEB表示用の画像の解像度は72dpi
■常に横長で、同じ比率での表示でOKな場合は、充分な解像度（横幅960px）あれば問題ない
■縦100％で使用したい画像はPC版モバイル版の両方を用意する
