メディアクエリを使用してイメージが表示されない

Question

イメージにブートストラップを使用しています。私はvisible-xsとimg-responsiveを使用しているので、ブラウザに小さな画像が表示されます。

しかし、media queryを使用して大きな画像を読み込もうとすると、画面は空白になります。

画像の場所を確認しましたが、そこにあります。

大きな画像がmedia queryで表示されない理由について、誰かが正しい方向に向いていますか？

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

とCSSファイル内

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

Answer 1

私はあなたの.cssファイルがcssフォルダ内の最も可能性が高いことを言うでしょう。

この場合、.cssファイルの場所に基づいてイメージの相対位置を使用する必要があります。最も可能性が高いこれは：visible-xsクラスのあなたの代わりにあなたの#my_imgの背景画像を設定する必要がありますのでので言及

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

Answer 2

あなたはBootstrap Docsによると、それだけで画面の残りの部分に隠れて、超小型の画面に表示されるように起こって、その後visible-xsクラスを使用している場合。

あなたは（backgroundを使用して）新しいイメージをロードしようとしているなら、あなたはそれがvisible-xsクラスを持っていないので、親#my_imgに適用する必要があります。

@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

dippasとして、あなたの#pic画像は1200pxで表示されません。問題の画像のCSSに適切な寸法を指定してください。