サポート » テーマ » 投稿内の画像にmax-width:100%;が有効にならない。

  • 解決済 arowana323

    (@arowana323)


    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件中)
  • max-width の値に 100% を当てている意図は?

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

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

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

    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のサイズに上書きされたということでしょうか。

    こんにちは、

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

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

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

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

    という事だと思います。

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

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

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

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

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

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

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

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

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

6件の返信を表示中 - 1 - 6件目 (全6件中)
  • トピック「投稿内の画像にmax-width:100%;が有効にならない。」には新たに返信することはできません。