未使用媒體查詢顯示圖像

我正在使用自舉圖像。它在瀏覽器中顯示較小的圖像，因爲我使用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; 
    }  
}

來源

2016-06-17 artist

如果'＃my_img'的背景圖像不能在該分辨率下顯示，那麼您是否應該設置背景圖像？ – cbillowes

我會說，你.css文件是最有可能在一個css文件夾中。

如果是這種情況，您需要根據您的.css文件的位置使用圖像的相對位置。最有可能的是：

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

來源

2016-06-17 20:11:23

感謝大家幫助我在這裏，我沒有正確訪問路徑。它爲我這樣工作背景：url（../ images/flower-1200.jpg）no-repeat; – artist

如果您正在使用然後根據Bootstrap Docs的visible-xs類，它只會出現在超小屏幕，隱藏在屏幕的其餘部分。

如果要加載一個新的形象（使用background），那麼你必須應用到父#my_img，因爲它不具備visible-xs類。

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

來源

2016-06-17 20:11:15 dippas

正如dippas提到的，你#pic圖像將不會在1200像素是可見的，因爲visible-xs類的，所以你需要設置你的#my_img的背景圖像來代替。請務必在相關圖片的CSS中提供適當的尺寸。

來源

2016-06-17 20:18:04 cbillowes

@media（min-width：1200px）{ ＃my-img { background：url（'images/flower-1200.jpg'）no-repeat; } //仍然沒有顯示圖片 } – artist

@artist看看我的代碼片段，它可能會幫助你 – dippas

未使用媒體查詢顯示圖像

回答

相關問題