ウィンドウサイズに基づいてimgを変更する

Question

私はVS2015サイトに、デスクトップ上で作成したより水平なイメージと、モバイルデバイス上でより垂直なイメージを表示させたいと考えています。私はサイジングの歪みを避けるために2つの別々の切り抜かれた画像を持っています。私は隠して表示するメディアクエリでCSSを使用しようとしましたが、それは常に両方の画像（ページ上でサイズ変更のための他のメディアクエリは正常に動作します）を示した。私は絵タグ試してみました：

<picture> 
    <source srcset="../Images/Chalkboard414.jpg" media="(max-width: 450px)"> 
    <source srcset="../Images/Chalkboard900.jpg"> 
    <img srcset="../Images/Chalkboard900.jpg>" 
</picture> 

、ダウンロード絵記入をし、まだ何の成功を

ヘッダないためにこれを追加しました。申し訳ありませんが初心者の質問ですが、私は簡単な考えのように思われるものをいくつかの助けが好きです。

グレッグ

Answer 1

私は別のやったことを知っている.....が、今のコードは完璧に動作しないでください。私はちょうど助けを待っている間にプロジェクトのいくつかの追加部分を追加し始めました...そしてそれは今素晴らしいです。

<div style="width:80%; margin-left:10%"> 
<div style="position:relative"> 
<picture> 
    <source srcset="../Images/Chalkboard414.jpg" media="(max-width: 450px)"> 
    <source srcset="../Images/Chalkboard900.jpg"> 
    <img style="width:100%" srcset="../Images/Chalkboard900.jpg"/> 
</picture> 
    <img style="position:absolute; width:80%; top:10%;left:20px" src="../Images/chalkcarpaltunnel.png" /> 
    <img style="position:absolute; width:80%; top:20%;left:20px" src="../Images/chalktriggerfinger.png" /> 
    <img style="position:absolute; width:80%; top:30%;left:20px" src="../Images/chalkfractures.png" /> 
    <img style="position:absolute; width:80%; top:40%;left:20px" src="../Images/chalkdupuytrens.png" /> 
    <img style="position:absolute; width:80%; top:50%;left:20px" src="../Images/chalkganglions.png" /> 
</div> 
</div>