<picture>の中の画像が切り替わりません。

Question

表示速度を早くするため、<picture>を使ったレスポンシブのサイトを作りたいのですが、
<picture>の中の画像が切り替わりません。
何かおかしいところがあれば教えていただきたいです。
よろしくお願いいたします。

<picture>
<div class="main_img">
<source media="(max-width:749px)" srcset="img/main_top_sp.png">
<source media="(min-width:750px)" srcset="img/main_top_pc.png">
<img src="img/main_top_pc.png" alt="main_img">
</div>
</picture>

.main_img{
	width:90%;
	margin:0 auto;
}
.main_img img{
	width:100%;
	display: block;
	margin:0 auto;
}

Comments

[miyabi_pudding]

何がどう切り替わらないのかも記載お願いします。
PCの時は、こちらの画像にしたいが、SPの方の画像が表示されてしまう、など。

あと、picture要素の中にdiv要素は入れれませんので（文法違反）やめましょう。
というかそれで直るかもしれませんよ。

[退会済みユーザー]

SPのときに、PC用の画像が表示されていました。
画像の切り替えができていないことが気付く前に、pictureが中央揃えにならず色々試してみようとdivを入れていました。
すみません。divを消したら切り替えができました。
アホなミスで情けないです…
ありがとうございました。

[miyabi_pudding]

HTML文法はチェックしといた方がいいですね。
間違えると、スタイルに悪影響を及ぼすことがほとんどですし、
SEOにおいて減点にもなります。
azuapricotさんの回答が正答かと思うので、
BA選出して質問閉じましょう。

Answer 1

divタグを外せば問題なく切り替わります。
逆にdivタグを入れてしまうと、 <img>タグの画像だけ表示されます。
構造をもう一度よく見直してみる必要があるかと？
本当にそのdivタグ必要ですか？

Comments

[退会済みユーザー]

画像の切り替えができていないことが気付く前に、pictureが中央揃えにならず色々試してみようとdivを入れていました。
divを消したら切り替えができました。
アホなミスです…ありがとうございました。