投稿内の画像にmax-width:100%;が有効にならない。

解決済 arowana323
(@arowana323)

8年前
WordPressの質問というよりCSSの仕様の質問になってしまっているかも知れません。
WordPressテーマをカスタマイズできるようになりたく、
一からのテーマ作成にチャレンジしています。

画像の表示サイズについての質問です。回答よろしくお願いします。

article内の画像の最大サイズを
```
article img{
 max-width:100%;
 height:auto;
}
```
と指定し、しっかり100％で表示されているのですが、
キャプションを付けるとmax-width:100%;が無効になってしまいます。
キャプションを付けることによってimgがdiv class=”wp-caption”で囲まれるため
```
.wp-caption{
 max-width:100%;
}
```
と指定すれば、問題は解決するのですが、
なぜarticle imgで指定しているのが無効になってしまうのかが分かりません。

お忙しいところ恐縮ですが、回答よろしくお願いします。

6件の返信を表示中 - 1 - 6件目 (全6件中)

천궁 메텔
(@digitmaetel)

8年前

max-width の値に 100% を当てている意図は？

トピック投稿者 arowana323
(@arowana323)

8年前

返信ありがとうございます。

質問文が話し言葉になっていました。
申し訳ありません。

max-widthの値に100%を当てている意図ですが、
投稿に画像をフルサイズ（初期設定では1024px）で挿入すると
コンテンツ部分をはみ出して表示されてしまうので、max-width:100%;を当てています。
トピック投稿者 arowana323
(@arowana323)

8年前
imgを囲うdivをきちんと見ると以下のようになっていました。

<div style="width: 850px" class="wp-caption aligncenter"> </div>

850pxに対してimgが100%に指定され、はみ出ていたようです。
```
.wp-caption{
 max-width:100%;
}
```
を指定することによって、有効になった理由は

style="width: 850px"

が
```
.wp-caption{
 max-width:100%;
}
```
によってarticleのサイズに上書きされたということでしょうか。
nobita
(@nobita)

8年前

こんにちは、

article img　の意味は、article 要素内の　img 要素は、親（ブロック要素）の幅を上限にする。という意味で、

article 要素の中に、div 要素があれば、そのサイズの幅で表示されます。

無ければ、article要素の幅が上限になります。

artile　要素内の　div要素が　artilce 要素からはみ出すサイズが指定されていれば、そのdiv要素のサイズを上限として表示するので、オーバーフローする。

という事だと思います。

kazaisyu
(@kazaisyu)

8年前

nobitaさんが詳しく言及されていらっしゃいますが、少しばかり補足を。

articleが認識されていない、もしくはimgがarticleの中に入っていないという可能性があります。

article要素はhtml5から実装されましたが、ブラウザによってはarticleが認識されず、article要素を指定した、もしくはarticleにつけられたIDやClassを使ったCSSは効かないことがあります。（ただ相当に古いブラウザですが）

もうひとつは、CSSの優先順序が低いという可能性があります。
要素指定のCSSは優先度が低いため、他の箇所でmax-widthが指定されていると上書きされる可能性があります。

デベロッパーツール（Firefoxならインスペクタ）で対象要素を調べると、「CSSがかかっていないのか」「優先順序が打ち消されているのか」どちらなのかをはっきりさせることができます。
実務レベルならば必須の技術です。CSSを弄る際は、ぜひご活用ください。

トピック投稿者 arowana323
(@arowana323)

8年前

どうやらキャプションを付けると、画像を囲むdivにcssではなくHTMLソース上で画像より大きめの幅が指定されるようで、これが原因のようです。

<div id="attachment_35" style="width: 810px;" class="wp-caption aligncenter">

ここで、wp-captionを100%にすると、style=”width: 810px;”が上書きされるようです。

デベロッパーツールとお二人の仕様解説で理解することができました。ありがとうございました！！