画像を加工せず、一部だけ切り取って表示する方法　で、スマホで表示すると位置がズレてしまう問題

CSS（スタイルシート）を使って画像をクロップして表示しても、スマートフォンで表示すると位置がおかしくなってしまう問題で悩んでいたけれど、解決したのでメモ。
スマートフォン用のテンプレートには、大きい画像をスマホの画面内に収めて表示させるために、スタイルシートに｢max-width:100%｣という指定がされている事が多く、これが問題になってたようで。

この指定のせいで、基準となる画像の大きさが変わってしまうので、クロップ範囲や移動距離の数値が狂ってしまう。

例えば、デバイスの画面幅が300pxで画像幅が600pxで、左に100px移動したい場合に left:100px と指定しても、スマホ表示では基準となる画像サイズが300pxで計算されてしまうため、同じ分量だけずらしたい場合は50pxだけ移動すれば良く、100px移動してしまうと位置がずれてしまう。

画像サイズも、仮に50%と指定すると、画面サイズ分縮小された状態から、更に50%縮小される事になってしまう。（画像クロップ枠の幅の50%になってしまう。）

それを解決するには、max-widthの指定を解除してやる必要がある。

スタイルシートのmax-widthの指定を消してしまって、その都度max-widthを指定してやるか（しないとスマホ画面より大きい画像ははみ出して表示されるようになる）、あるいはクロップする時だけmax-width指定を無効化してやる（max-width:none）とよいようだ。

もはや、PCを持たずスマホで見ている人のほうが多くなってきているようなので、スマホ用の表示を優先的に考慮した方が良い時代になったようです。。。