何で画像の枠がはみ出すの!?max-width:100%だけではダメ!そんなときの解決法

ブログで画像に線(border)と内側余白(padding)を付けて(写真枠など)装飾したとき、親要素の幅からはみ出して、スマホでグラグラ横揺れを起こしてしまいます。なんで画像の枠が収まらないのか。それは線と、内側の余白が原因だったんです。

解決法はコピペで対解決できますので、CSSに貼り付けて画像をスコーン!っと領域に収めてください。スマホ対応のmax-width:100%や画像のはみ出しの対処法でも反映しない時のCSSを紹介しますね。

画像の枠まで表示して、スマホから猫

スポンサーリンク

レスポンシブデザインで、画像がはみ出す原因と解決法

親要素に指定されてる幅よりも画像の幅が大きいと、はみ出してグラグラ横揺れを起こします。例えばdivの幅が400として、それより画像の幅が狭いと全て表示され、幅が広い場合、見切れて横揺れをおこすんですよね。

  • div要素の幅400px画像の幅320px=グラグラしない。

画像が親要素の幅より小さいときハマってる

幅400pxより画像の幅が小さいからハマってグラグラしません。

  • div要素の幅400px画像の幅640px=グラグラはみ出す

画像が親要素の幅より大きいとき、はみ出してグラグラ起こす

幅400pxより画像の幅が大きいと、はみ出してしまってグラグラしてしまいます。

要素にmax-width: 100%;を使うことでレスポンシブ化して解決

img { max-width: 100%; height: auto; }でキチンと表示された画像

画像は、img {max-width: 100%;}にheight: auto;を入れたものですが、横幅を調整したら、縦長画像になっちゃうのを回避するために高さにautoの値を入れてます。

詳しくは下記リンクを参考にしてください。

LINKCSSでスマホ対応!画面からはみ出す、グラグラ横揺れする原因!画像YouTubeブログカード、テーブル表が見切れる時の対処法

でもでも!max-width: 100%;を使ったうえで枠を入れた場合、ボーダーと内側の余白ぶんが、はみ出してしまうんです。。次に説明しますね。

 画像に枠(線と余白)をいれると、はみ出す理由!

画像の横幅widthに対して100%にしても、枠を入れることでボーダー(線)やパディング(内側の余白)の計算が入ってないから、そのぶんグラグラ横揺れしてはみ出してしまいます。画像のみレスポンシブで枠は対応してない状態ですね。

下記の画像は幅に合わせてmax-width: 100%;が入った状態と、画像に枠を入れたときの様子です。※線と余白は解りやすいように線と余白を太くしてます。

画像のmax-widthを100%にして線と内側余白がはみ出す例

親要素の幅320pxに対して100%になるようにimg{max-width: 100%;}を入れた画像に、枠border(線)とpadding(内側の余白)を入れたぶんが見切れてしまってます。これをハメるために、borderとpaddingを計算に入れてあげれば解決しそうです。

画像の枠、border(線の太さ)とpadding(内側余白の太さ)計算方法を指定するプロパティbox-sizing

CSSのプロパティで、ボックスサイズの計算をしてくれるのがbox-sizingで、親要素内の領域の幅に、borderとpaddingの数値を含めて表示してくれる値が、border-boxになります。難しいですかね。。

簡単に言えば、img {box-sizing: border-box;}を追記すれば、枠分はみだしてしまった画像とborder(線)、padding(内側の余白)を含めて勝手に計算して、はみ出さないで(親要素の領域ない)に綺麗に表示してくれるCSS!こんな感じになります♪

box-sizing: border-box;を追記したら枠まで表示される

この場合、画像とその左右にあるborder(線)とpadding(内側の余白)を足したものを表示するので、枠ぶんも計算して枠まで綺麗に表示されるんですね。もう1つ画像で比較してみますね。

box-sizing:border-box;あるなしの比較画像

枠のボーダーまでしっかり表示されてるのが解ります。合わせてグラグラ横揺れのページも参考になりますので、下記画像リンクよりどうぞ♪

スマホから、はみ出たyoutubeやtableの表や画像

box-sizingの3つの値の指定の違い

プロパティbox-sizingには、3つの値があります。それぞれボックスサイズの幅と高さに線borderと内側の余白paddingを含めるかどうかで値が変わってきます。

  1. content-box
    初期値:『線と内側の余白』を含めない
  2. padding-box
    『内側の余白』を含める
  3. border-box
    上述通り、ボックス内の幅、高さを『線と内側の余白』を含める

このページでは、画像の幅に『線borderと内側の余白padding』を含めたかったので、border-boxの値を使いました。『線borderと内側の余白padding』は色んなところで使うのでbox-sizing: border-box;はチェックですね。

参考CSS3リファレンス box-sizing …… ボックスサイズの算出方法を指定する|クイックリファレンス

まだはみ出す!その考えられる理由は何!?

テーマのCSSを上書きするとき、元に書いてあるCSSの優先順位が高いとき。CSSの書いてある場所が違ってるとき。などは反映しません。

優先順位が原因のとき

例えば子テーマを使っているとします。親テーマのセレクタが元々『.article-inner img』と指定されているのに、セレクタを『img』と指定すれば、優先順位は『.article-inner img』のほうが強いので、反映されません。

LINK初心者のCSSが反映されない原因の1つ!優先順位の詳細度とは

または、idセレクタを使った『#main img』とclassセレクタを『.article-inner img』では、idのほうが優先順位が高くなります。『#main img』が強い!

LINKCSSの基本、class・id・子孫セレクタなど!HTMLタグの装飾、セレクタの指定方法と優先順位

CSS(スタイルシート)を開いて、ctrlFキーでimgを検索するか、要素の検証を使って該当のセレクタがどうなってるのか、調べてみても良いかもしれませんねっ。

要素の検証、デベロッパーツール基本的な使い方は下記。

LINK初心者が要素の検証でカスタマイズできる方法!HTMLとCSS入門編

要素の検証で、画像にポイントを当ててCSSをのぞいて見てください。するとセレクタが分かりますので、セレクタを一致させてスタイルシートCSSの一番下にでも書き込んでみてください。

上に書かれたものは、一番下に書いたものと同じセレクタで、同じプロパティ『max-width』なら上書きされますよ。

実際に要素の検証でスタイルを変える手順を見てみたいなら、下記を参考程度に見てみると、分かりやすいかも!?^^

LINK超時短!!ブログのテーマカラー、背景色やボーダーを一気に変更する方法 #gush4

CSSの書いてある場所が違ってる場合

使ってるテーマによって、CSSがモバイル専用やパソコン専用などがある場合があります。違う場所に書き込んでないか、確認してください。

また1つのCSSにモバイル用、タブレット用、PC用と書いてある場合。ほかには一番下に追記すると『スマホ用』または『PC用』として反映する、といった場合もあります。

書く場所ですけど、どこに書いたら良いか分からないときでまだ反映しないとき、CSSの一番下に@media screen and (max-width : 768px)を使って書いてください。

『最大の横幅が768px』よりスクリーンの横幅が狭いとき反映させるCSSです。

もう一息、具体的にみたいときは下記をみてくださいね。

LINK見出し4:まだCSSが反映されない原因!書いてる場所が違ってるときの解決方法。

これでうまく反映されますように^^

さいごに

ちいさなカスタマイズって凝ってしまいますよね。私もCrayon Syntax Highlighterのカスタマイズしたは良いけど、バージョンアップで表示が崩れてしまいました・・wカスタマイズも程ほどにしないと、ダメですね。。

関係ないけど、Crayon Syntax Highlighter直ったので書いておきますね※今のところ不具合なし。

うまく反映したら、教えてくださいね^^

それでは、かうたっくでしたっ!

書いた人:かうたっく

何も知らない初心者ですが、WordPressでブログを始めました。 ブログの技術系でつまずいたエラーを経験したことからエラー関連を、初心者が初心者に向けて分かりやすい言葉で書いてます★子どもの喘息様気管支炎や、幼い子どもとの生活ページなどよく読まれる雑多ブログを運営中^^♪ご意見、感想、質問はお問い合せよりお待ちしています。

Twitterフォロー