ワードプレス max-width100%が効かない

ワードプレスでレスポンシブデザインを作ろうと思っているのですが、

画像の大きさを変えるために、cssに

img{max-width:100%;}

を指定しているのですが、ウィンドウサイズを変えても画像の大きさが変わらず困っています。

cssの指定は効いています。max-widthの部分だけ効いていません。

何が原因なのでしょうか？よろしくお願いします。

No.3 回答者： taloo 回答日時： 2014/06/13 19:23

>ワードプレスで吐き出されているページに載っている画像については動作しないようでした。

その吐き出し方はどのようにしていますか？
ワードプレスの投稿で画像挿入をした場合はclassがつきますので、そのclassセレクタにスタイルが指定されていたり、widthやheightが書かれているはずですので、
投稿時に編集画面のコードビューでclassなどの指定を消すか、
テーマファイルのCSSを書き直さないと無理です。

No.2 回答者： ORUKA1951 回答日時： 2014/06/13 19:02

直近のstaticでない抱合ロックのサイズは？？

またimg要素は内容を持たないインライン要素--置換インライン要素---ですから、置換される画像のサイズに従います。
　もし直近のstatic以外の抱合ブロックにあわせるのでしたら、
div.figure{position:relative;}
div.figure img{
display:block;
width:100%;
min-width:0;
max-width:100%;/* 親のサイズ一杯 */
height:auto;
}
とかです。
　display:block;とwidthと共に指定しないと意味無いのは分かりますよね。そうしないと自身のサイズを参照してしまう。--置換インライン要素ですから

No.1 回答者： balloon23 回答日時： 2014/06/13 17:10

img {

display:block;
width:100%;
max-width:画像の幅;}
でどうでしょう？
　
私の勘違いがあるかもしれないのでついでに。
もし「max-widthが効かない！」であれば、あまりお行儀がよろしくないですが「!important」つけてみるとか。

この回答へのお礼

ありがとうございます。
試してみましたが駄目でした。

先ほど気づいたので補足になりますが、直で画像のurlを打って見るとちゃんとウィンドウサイズ通りに縮小されました。

ワードプレスで吐き出されているページに載っている画像については動作しないようでした。

テーマはオリジナルのものを使っています。

お礼日時：2014/06/13 17:48