レスポンシブデザインの画像が可変しないのですが、なぜでしょう…

Question

###前提・実現したいこと
レスポンシブデザイン中です。
widthが767px以下になったらメイン画像を可変させたいのですが。---

###発生している問題・エラーメッセージ
メイン画像が可変してくれません・・・

###該当のソースコード

<div id="header"> <p><img src="main-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のみに適応/
}

}

###試したこと
現在、PC用からレスポンシブデザインへ変更中です。
画像を可変するには

img{
width:100%;
max-width:100%;
height:auto;
}

にしたら良いと色々なものに書いてあるので試してみましたが、widthが767px以下になってもメイン画像が縮小してくれません・・・。
どうしてなのでしょう・・・。
初めての作業で、ひよっこです。
どなたか教えていただけるとありがたいです。
宜しくお願いいたします。

###補足情報(言語/FW/ツール等のバージョンなど)
より詳細な情報

Comments

[kei344]

質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

[ayasan]

Kei344さん、先ほど、質問を再送させていただきました。コードブロックとはこういうことですね！どうぞ宜しくお願いいたします！

[kei344]

質問本文は編集することが可能なので、重複投稿せず修正するようにしてください。

Answer 1

metaタグのviewport入れてますでしょうか？

<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" name="viewport">

Comments

[ayasan]

TONGARIさん、コメントありがとうございます！！
以下を記述しているのですが、これでは不完全ですか？

<meta name="viewport" content="width=device-width,user-scalable=no">

[TONGARI]

多分それで大丈夫だとおもいます！

headerはPCも100%になっているので大枠の大きさをスマホの時パーセントにしてあげないといけません

[TONGARI]

max-widthプロパティ（最大幅）なので、768px以上の時は100%で表示されて
768px以下の時は<p><img src="main-img.jpg" width="1366" height="949" alt=""></p>みたく1366pxで表示されてしまいますね