iPhoneで画像がズレる・はみ出す時のCSS修正【初心者に多い原因と解決】

WordPressサイトを作っていると、「PCでは正常なのに、スマホで見ると画像がズレる・はみ出す」ということがあります。

特にiPhoneで確認したときに気付くケースも多いですが、多くの場合はiPhone固有の不具合ではなく、画面幅が狭くなったときのCSSや画像サイズの指定が原因です。
Androidスマートフォンでも同じような現象が発生することがあります。

この記事では、WordPressサイトでスマホ表示の画像がズレたり、画面からはみ出したりする主な原因と、安全なCSS修正方法を初心者向けに解説します。

1 よくある原因① 画像が親要素より大きくなっている

最もよくある原因は、画像の横幅がスマートフォンの表示領域や親要素の幅を超えているケースです。

たとえば、大きな画像をそのまま表示していて、画像に横幅を制限するCSSが設定されていない場合、スマートフォンでは画像が画面からはみ出すことがあります。

この場合は、画像に次のCSSを指定するのが基本です。

img {
    max-width: 100%;
    height: auto;
}

max-width:100%; を指定すると、画像が親要素の横幅より大きくならないように制限できます。

さらに height:auto; を指定することで、画像の縦横比を維持したまま縮小できます。

一般的な画像の「横はみ出し防止」が目的であれば、まずはこの指定を確認しましょう。

2 width:100% と max-width:100% の違い

画像のスマホ対応では、

width: 100%;

と、

max-width: 100%;

を混同しやすいので注意が必要です。

width:100%; は、画像を親要素の横幅いっぱいまで広げます。

一方、

max-width: 100%;

は、画像が親要素より大きい場合だけ縮小し、本来の画像サイズより無理に大きくしません。

そのため、サイト全体の画像に指定するのであれば、

img {
    max-width: 100%;
    height: auto;
}

の方が安全です。

カード画像やメインビジュアルなど、必ず横幅いっぱいに表示したい画像については、対象を限定して次のように指定します。

.image-box img {
    display: block;
    width: 100%;
    height: auto;
}

3 よくある原因② 親要素が固定幅になっている

画像自体に問題がなくても、画像を囲んでいる親要素に固定幅が指定されていると、スマートフォンで横にはみ出すことがあります。

たとえば次のようなCSSです。

.image-box {
    width: 600px;
}

PCでは問題なくても、スマートフォンの表示領域より600pxの方が広ければ、横スクロールやレイアウト崩れの原因になります。

3.1 修正方法：固定幅ではなく可変幅にする

.image-box {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
}

この指定なら、PCでは最大600pxまで表示され、画面幅が狭いスマートフォンでは親要素に合わせて自動的に縮小されます。

width と max-width を組み合わせるのは、レスポンシブデザインでよく使う方法です。

4 よくある原因③ width:100% に padding が加わっている

画像ではなく、その周囲の要素が横にはみ出していることもあります。

たとえば、

.image-box {
    width: 100%;
    padding: 20px;
}

のような指定です。

CSSの設定によっては、100%の横幅に左右のpaddingが加算され、親要素より大きくなることがあります。

このような場合は、

.image-box {
    box-sizing: border-box;
    width: 100%;
    padding: 20px;
}

とします。

box-sizing:border-box; を指定すると、paddingやborderを含めた状態でwidthが計算されるため、横幅のはみ出しを防ぎやすくなります。

5 よくある原因④ object-fit の指定方法が合っていない

カード型の画像やサムネイルなど、高さを揃えて画像をトリミングしたい場合には object-fit がよく使われます。

たとえば次のように指定します。

.image-box img {
    display: block;
    width: 100%;
    height: 200px;
    object-fit: cover;
}

object-fit:cover; を指定すると、指定された画像領域を埋めるように画像を拡大・縮小し、余った部分をトリミングして表示します。

ここで重要なのは、object-fitを使ってトリミングする場合、画像の表示領域となる高さや縦横比を決める必要があるという点です。

たとえば、

height: auto;
object-fit: cover;

だけでは、通常の画像表示とほとんど変わらず、期待したトリミングにならないことがあります。

5.1 角丸の枠から画像がはみ出す場合

親要素に角丸を付けていて、その外側に画像が見えてしまう場合は、親要素に overflow:hidden; を指定します。

.image-box {
    overflow: hidden;
    border-radius: 10px;
}

.image-box img {
    display: block;
    width: 100%;
    height: 200px;
    object-fit: cover;
}

ただし、object-fitを使うためにoverflow:hiddenが必須というわけではありません。

overflow:hiddenは、親要素の外にはみ出した部分を隠したい場合や、角丸の枠内に画像を収めたい場合に使用します。

6 よくある原因⑤ object-position で重要な部分が切れている

object-fit:coverを使用すると画像の一部がトリミングされるため、人物写真などでは顔が切れてしまうことがあります。

特にPCでは問題なくても、スマートフォンでは画像の縦横比が変わるため、重要な部分が見えなくなることがあります。

その場合は object-position を調整します。

.image-box img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    object-position: center center;
}

人物の顔を少し上側に残したい場合は、

object-position: center 30%;

のように調整することもできます。

画像ごとに重要な部分が違う場合は、すべての画像に同じobject-positionを設定するのではなく、対象画像ごとに調整する方がきれいに表示できます。

7 よくある原因⑥ position:absolute の基準位置が間違っている

画像の上に文字やボタン、キャッチコピーなどを重ねている場合は、position:absoluteの基準位置が原因で表示がズレることがあります。

たとえば、

.image-wrap .text {
    position: absolute;
    bottom: 10px;
    left: 10px;
}

とだけ指定している場合です。

absoluteで配置した要素を画像の位置を基準にしたい場合は、親要素に position:relative; を指定します。

.image-wrap {
    position: relative;
}

.image-wrap .text {
    position: absolute;
    bottom: 10px;
    left: 10px;
    color: #fff;
}

親要素にposition:relativeがない場合、absolute要素が意図していない祖先要素などを基準に配置され、文字やボタンが予想外の位置へ移動することがあります。

これはiPhoneだけの問題ではなく、CSSの配置方法によって発生する問題です。

8 よくある原因⑦ PC用の固定サイズがスマホにも適用されている

PC向けに画像サイズを固定していて、そのCSSがスマートフォンにもそのまま適用されているケースもよくあります。

たとえば、

.main-image {
    width: 800px;
    height: 400px;
}

のような指定です。

この場合は、メディアクエリを使ってスマートフォンだけサイズを変更できます。

.main-image {
    width: 100%;
    max-width: 800px;
    height: 400px;
    object-fit: cover;
}

@media (max-width: 767px) {
    .main-image {
        height: 240px;
    }
}

PCとスマートフォンでは画面の縦横比が大きく違うため、画像によってはPCとスマートフォンで高さやobject-positionを変更した方が自然に見えます。

9 画像下に少しだけ隙間ができる場合

画像の横ズレとは別に、画像の下に数ピクセル程度の余白ができることがあります。

img要素は初期状態ではインライン要素として扱われるため、文字のベースライン用の隙間が画像の下に残ることがあります。

これを消したい場合は、

img {
    display: block;
}

を指定します。

ただし、サイト内のすべての画像をblockにすると既存レイアウトへ影響する場合もあるため、必要に応じて対象を限定する方法もあります。

.image-box img {
    display: block;
}

10 初心者向け：まず確認したい安全な画像CSS

画像がスマートフォンから横にはみ出している場合、まず確認したい基本CSSは次の指定です。

img {
    max-width: 100%;
    height: auto;
}

画像下の余白もなくしたい場合は、

img {
    display: block;
    max-width: 100%;
    height: auto;
}

とします。

ただし、WordPressテーマによってはすでに同様のCSSが設定されています。
画像がズレている場合は、画像そのものだけでなく、親要素のwidth、padding、margin、position、overflowなども確認することが重要です。

11 スマホだけ横スクロールが出る場合の確認方法

画像が原因だと思っていても、実際には別の要素が画面幅からはみ出していることがあります。

よくある原因には次のようなものがあります。

• width:600pxなどの固定幅
• 画像の固定サイズ
• 長いURLや英数字
• 表（table）の横幅
• position:absoluteで配置した要素
• width:100%に左右paddingを追加した要素
• 大きなmarginやtransformによる移動

そのため、画像だけを修正して直らない場合は、ブラウザの開発者ツールで横にはみ出している要素を確認すると原因を見つけやすくなります。

12 WordPressテーマを使っている場合の注意点

WordPressでは、Lightning、Cocoon、SWELLなど多くのテーマが最初からレスポンシブ対応されています。

そのため、テーマ全体に対して、

img {
    width: 100% !important;
}

のような強いCSSを追加すると、逆に既存デザインを崩してしまうことがあります。

特に !important を付けた全体指定は、ロゴ、小さなアイコン、バナーなどにも影響する可能性があります。

できるだけ、

.image-box img {
    width: 100%;
    height: auto;
}

のように、修正したい場所のクラスを指定してCSSを適用するのがおすすめです。

13 まとめ：スマホの画像ズレは画像だけが原因とは限らない

PCでは正常なのにスマートフォンで画像がズレる場合は、iPhoneそのものの不具合と決めつけず、まずCSSを確認しましょう。

• 画像のはみ出し防止には max-width:100% を確認する
• 画像の縦横比を維持する場合は height:auto を使う
• 親要素に固定幅が入っていないか確認する
• width:100% と padding を併用するときは box-sizing を確認する
• object-fit:cover を使う場合は画像の高さや縦横比も設定する
• overflow:hidden は object-fit の必須指定ではない
• 人物写真が切れる場合は object-position を調整する
• absolute配置の基準にしたい親要素には position:relative を指定する
• PCとスマートフォンで画像サイズを変える場合はメディアクエリを使う
• サイト全体への width:100% !important の指定は慎重に行う

まずは、

img {
    max-width: 100%;
    height: auto;
}

を基本として確認し、それでも直らない場合は画像を囲んでいる親要素のCSSを調べてみましょう。

スマートフォンでの画像ズレは、画像そのものではなく親要素の幅や余白、配置方法が原因になっているケースも非常に多いです。
原因となっている要素を確認してから修正することで、PC・iPhone・Androidのどの画面でも崩れにくいWordPressサイトにできます。