- 締切済み
ワードプレス max-width100%が効かない
ワードプレスでレスポンシブデザインを作ろうと思っているのですが、 画像の大きさを変えるために、cssに img{max-width:100%;} を指定しているのですが、ウィンドウサイズを変えても画像の大きさが変わらず困っています。 cssの指定は効いています。max-widthの部分だけ効いていません。 何が原因なのでしょうか?よろしくお願いします。
- みんなの回答 (3)
- 専門家の回答
みんなの回答
- 神崎 渉瑠(@taloo)
- ベストアンサー率44% (1016/2280)
>ワードプレスで吐き出されているページに載っている画像については動作しないようでした。 その吐き出し方はどのようにしていますか? ワードプレスの投稿で画像挿入をした場合はclassがつきますので、そのclassセレクタにスタイルが指定されていたり、widthやheightが書かれているはずですので、 投稿時に編集画面のコードビューでclassなどの指定を消すか、 テーマファイルのCSSを書き直さないと無理です。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
直近の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と共に指定しないと意味無いのは分かりますよね。そうしないと自身のサイズを参照してしまう。--置換インライン要素ですから
- balloon23
- ベストアンサー率69% (16/23)
img { display:block; width:100%; max-width:画像の幅;} でどうでしょう? 私の勘違いがあるかもしれないのでついでに。 もし「max-widthが効かない!」であれば、あまりお行儀がよろしくないですが「!important」つけてみるとか。
お礼
ありがとうございます。 試してみましたが駄目でした。 先ほど気づいたので補足になりますが、直で画像のurlを打って見るとちゃんとウィンドウサイズ通りに縮小されました。 ワードプレスで吐き出されているページに載っている画像については動作しないようでした。 テーマはオリジナルのものを使っています。