Bild wird nicht mit Medienabfrage angezeigt

Question

Ich verwende Bootstrap für meine Bilder. Es zeigt das kleinere Bild im Browser an, während ich visible-xs mit img-responsive verwende.

Wenn ich jedoch versuche, das größere Bild mit media query zu laden, ist der Bildschirm leer.

Ich habe den Speicherort des Bildes überprüft und es ist da.

Könnte jemand bitte mich in die richtige Richtung weisen, warum ein größeres Bild nicht mit media query angezeigt wird?

<div class="container"> 
<div id="my_img"><img id="pic" src="images/flower.jpg" class="img-responsive visible-xs"></div> 
</div> 

und in der CSS-Datei

@media (min-width: 1200px) { 
    #pic{ 
    background:url('images/flower-1200.jpg') no-repeat; 
    }  
} 

Answer 1

Ich würde sagen, dass Ihre .css Dateien in einem Ordner css am wahrscheinlichsten sind.

Wenn dies der Fall ist, müssen Sie die relative Position des Bildes basierend auf dem Speicherort Ihrer .css Datei verwenden. dies höchstwahrscheinlich:

background:url('../images/flower-1200.jpg') no-repeat;

Answer 2

, wenn Sie die visible-xs Klasse dann verwenden nach Bootstrap Docs, es geht nur in extra kleinen Bildschirmen erscheint, im Rest der Bildschirm versteckt.

Wenn Sie ein neues Bild zu laden versuchen (die background verwenden), dann müssen Sie auf die Mutter gelten #my_img da sie nicht die visible-xs Klasse hat.

@media (min-width: 1200px) { 
 
    #my_img { 
 
    background: url('//lorempixel.com/1600/900') no-repeat; 
 
    height:900px; 
 
    max-width:100%; 
 
    } 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-xs-12 col-md-12"> 
 
     <div id="my_img"> 
 
     <img id="pic" src="//dummyimage.com/100x100" class="img-responsive visible-xs"> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 3

Wie dippas erwähnt, ist Ihr #pic Bild wird bei 1200px nicht sichtbar sein, weil der visible-xs Klasse, so dass Sie das Hintergrundbild Ihres #my_img statt einstellen müssten. Stellen Sie sicher, dass Sie in Ihrem CSS die entsprechenden Dimensionen des betreffenden Bildes angeben.