@media query <img> src tauschen funktioniert nicht

Question

Ich habe einige Fragen und Antworten hier überprüft und kann immer noch nicht mein Problem finden.

Was ich versuche zu tun ist: Schalten Sie die Anzeige-Eigenschaft dieser drei Bilder ein oder aus abhängig von der Größe des Bildschirms. Es sollte immer nur ein Bild angezeigt werden.

Ich habe keine CSS auf .imgphone angewendet, außer was im Abschnitt @media Abfragen aufgeführt ist.

.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>

bereits.

Ich hoffe, es hilft.