ただいま、レスポンシブデザイン中です。
widthが767px以下になったらメイン画像が可変するようにしたいのですがうまくいきません・・・。
よく、
img{ width:100%; max-width:100%; height:auto; }
にしたら良いと色々書いてあったので以下のように試みましたがメイン画像が縮小されませんでした・・・。
ひよっこなもので教えていただけるとありがたいです。
こちらがHTMLです。 <div id="header"> <p><img src="img.jpg" width="1366" height="949" alt=""></p> </div>
PC用CSSはこちら #header{ width: 100%; height: auto; } #header p img{ width: 100%; height: auto; }
レスポンシブ用のCSSがこちらです。 @charset "UTF-8"; /*メディアクエリ設定(※widthが767px以下の場合にCSSを適用する)*/ @media screen and (max-width:768px){ #header{ width: 100%; } /*画像サイズの設定*/ #header p img { max-width: 100%; height: auto; width: auto;/*IE8のみに適応*/ } }
なぜなのでしょうか?
どなたか教えていただけるとありがたいです。
回答3件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。