Ändern Bild src in Abhängigkeit von der Bildschirmgröße

Question

Ich versuche, das Bild src je nach Bildschirmgröße mit Medienabfragen zu ändern. Ich habe Hintergrund versucht: url (x); aber es hat nicht funktioniert. Ich habe irgendwo gelesen, dass ich Inhalt verwenden soll: url (x), aber wenn ich das tue, bekomme ich eine leere Seite. Kann mir jemand sagen, was mit meinem Code nicht stimmt?

HTML:

<div class="container" id="at-header"> 
    <img class="image" id="logo" src="img/logo_white.png" /> 
    <img class="image" id="main-img" src="img/desktop_homepage.jpg" /> 
</div> 

CSS:

@media screen and (max-width: 767px){ 
    #main-img{  
     content:url("img/mobile_homepage.jpg"); 
    } 
} 

@media screen and (min-width: 768px) {  
    #main-img{  
     content:url("img/tablet_homepage.jpg"); 
    } 
} 
@media (min-width: 992px){  
     #main-img{   
      content:url("img/desktop_homepage.jpg"); 
     } 
} 
@media (min-width: 1200px) {  
    #main-img{   
     content:url("img/desktop_homepage.jpg"); 
    } 
} 

Answer 1

dies ist für mich arbeiten:

#main-img { 
 
    
 
    height: 250px; 
 
    width:100% 
 
} 
 

 
@media screen and (max-width: 767px) { 
 
    #main-img{ 
 
    \t background-image: url(http://subtlepatterns.com/patterns/dark_embroidery.png); 
 
    } 
 
} 
 

 
@media screen and (min-width: 768px) {  
 
    #main-img{  
 
    \t background-image: url(http://subtlepatterns.com/patterns/dark_embroidery.png); 
 
    } 
 
} 
 
@media (min-width: 992px) {  
 
     #main-img{   
 
      background-image: url(http://subtlepatterns.com/patterns/paisley.png); 
 
     } 
 
} 
 
@media (min-width: 1200px) {  
 
    #main-img{   
 
     background-image: url(http://subtlepatterns.com/patterns/paisley.png); 
 
    } 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"> 
 
<div class="container"> 
 
    <div id="main-img" /> 
 
</div>

Answer 2

Dieser ist Workin g für mich. Ich weiß nicht, ob Sie mit diesem Tag vertraut sind, aber es braucht nicht einmal CSS.

<picture> 
    <source media="(min-width: 900px)" srcset="BigImage.png"> 
    <source media="(min-width: 480px)" srcset="MediumImage.png"> 
    <img src="OtherImage.png" alt="IfItDoesntMatchAnyMedia"> 
</picture> 

In diesem Fall würde "BigImage" angezeigt, wenn die Gerätebreite mehr als 900px beträgt. "MediumImage" wenn es mehr als 480px ist und "OtherImage" Wenn es weniger als 480px ist. Wenn Sie "max-width: 900px" anstelle von min-width hätten, würde dies auch angezeigt, wenn die Breite mehr als 900px beträgt.

Hoffe es hilft!