@media query <img> srcスワップが動作しない

Question

ここでいくつかの質問と回答を確認したが、まだ問題が見つかりません。

私がしようとしているのは： 画面のサイズに応じて、これらの3つの画像の表示プロパティをオンまたはオフに切り替えます。一度に表示するイメージは1つのみです。

@mediaクエリのセクションに記載されているものを除き、私は.imagephoneにCSSを適用していません。

.imgcontainer{ 
 
    background-color: red; 
 
    width: 100%; 
 
    overflow: hidden; 
 
    max-width: 1500px; 
 
    margin: auto; 
 
} 
 

 
.imagetablet{ 
 
    display: none; 
 
} 
 

 
.imagedesktop{ 
 
    display: none; 
 
} 
 

 
/**************@Media Tablets****************/ 
 
    
 
    @media screen and (max-width="800px"){ 
 
     .imagephone{display:none;} 
 
     .imagetablet{display:block;} 
 
     .imagedesktop{display:none;} 
 
     } 
 

 
/**************@Media Desktop*****************/ 
 
    
 
    @media screen and (max-width="1200px"){ 
 
     .imagephone{display:none;} 
 
     .imagetablet{display:none;} 
 
     .imagedesktop{display:block;} 
 
     }

<div class="imgcontainer"> 
 
     <img class="imagephone" src="BannerPicSmall.png"> 
 
     <img class="imagetablet" src="BannerPicMedium.png"> 
 
     <img class="imagedesktop" src="BannerPicLarge.png"> 
 
    </div>

Answer 1

\t .imgcontainer{ 
 
    background-color: white; 
 
    width: 100%; 
 
    overflow: hidden; 
 
    max-width: 1500px; 
 
    margin: auto; 
 
} 
 

 
.imagetablet{ 
 
    display: none; 
 
} 
 

 
.imagedesktop{ 
 
    display: none; 
 
} 
 

 
/**************@Media Tablets****************/ 
 
    
 
    @media screen and (max-width:800px){ 
 
     .imagephone{display:none !important;} 
 
     .imagetablet{display:block !important;} 
 
     .imagedesktop{display:none !important;} 
 
     } 
 

 
/**************@Media Desktop*****************/ 
 
    
 
    @media screen and (max-width:1200px){ 
 
     .imagephone{display:none !important;} 
 
     .imagetablet{display:none !important;} 
 
     .imagedesktop{display:block !important;} 
 
     } 
 

 

<div class="imgcontainer"> 
 
     <img class="imagephone" src="http://www.claudelorrain.org/An-Artist-Studying-Nature.jpg"> 
 
     <img class="imagetablet" src="http://hdwallpaperia.com/wp-content/uploads/2015/01/Nature-Wallpaper-daydreaming-34811101-1024-7686-640x480.jpg"> 
 
     <img class="imagedesktop" src="http://hdwallpaperia.com/wp-content/uploads/2013/10/Beautiful-Nature-Desktop-Wallpaper-640x360.jpg"> 
 
    </div>

これを試してみてください。

希望します。