用媒體查詢改變傳送帶圖像奇怪的錯誤

我有這個傳送帶，我需要根據媒體大小更改圖像，我使用這個HTML和CSS，它的工作原理，但第二個和第三個圖像首先顯示爲空白（旋轉木馬消失），然後像6秒鐘後，圖像出現。如果我不使用CSS，他們正常加載。用媒體查詢改變傳送帶圖像奇怪的錯誤

我已經嘗試添加顯示塊到我要顯示的那些，但不工作，要麼

@media only screen and (max-width: 479px) { 
#slider1-lg { display: none; } 
#slider2-lg { display: none; } 
#slider3-lg { display: none; } 

} 
@media only screen and (min-width: 768px) { 
#slider1-sm { display: none; } 
#slider2-sm { display: none; } 
#slider3-sm { display: none; } 

} 





<div id="myCarousel2" class="carousel slide carouseltop" data-ride="carousel"> 

      <div class="carousel-inner " role="listbox"> 
       <div id="slider1-lg" class="item active"> <img src="img/slider/slide-01-hm-1920.jpg" width="100%" height="100%"> </div> 
       <div id="slider1-sm" class="item "> <img src="img/slider/slide-01-hm-720.jpg" width="100%" height="100%"> </div> 

       <div id="slider2-lg" class="item "> <img src="img/slider/slide-02-hm-1920.jpg" width="100%" height="100%"> </div> 
       <div id="slider2-sm" class="item "> <img src="img/slider/slide-02-hm-720.jpg" width="100%" height="100%"> </div> 

        <div id="slider3-lg" class="item "> <img src="img/slider/slide-03-hm-1920.jpg" width="100%" height="100%"> </div> 
        <div id="slider3-sm"class="item "> <img src="img/slider/slide-03-hm-720.jpg" width="100%" height="100%"> </div> 

      </div> 
      <a class="left carousel-control" href="#myCarousel2" role="button" data-slide="prev"> <span style="color:#fff" class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> 
      <a class="right carousel-control" href="#myCarousel2" role="button" data-slide="next"> <span style="color:#fff" class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> 
     </div>

來源

2015-12-11 Mariana Hernandez

圖像元素

圖片元素，反應靈敏的形象問題官方的解決辦法，但不是所有的瀏覽器都支持它，但（儘管有polyfills）

<div class="item active"> 
    <picture> 
    <source media="(max-width: 479px)" srcset="img/slider/slide-01-hm-720.jpg"> 
    <source media="(min-width: 479px)" srcset="img/slider/slide-01-hm-1920.jpg"> 
    <img src="img/slider/slide-01-hm-1920.jpg" width="100%" height="100%"/> 
    </picture> 
</div>

工作組規格： http://www.w3.org/TR/html-picture-element/

Chrome團隊的HTML5 R OCKS博客： http://www.html5rocks.com/en/tutorials/responsive/picture-element/

Mozilla的文檔： https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture

一個填充工具： https://scottjehl.github.io/picturefill/

你當前的方法

這就是說，你的使用方法您的問題是差距您的折點：

width < 479 => slider1-lg is hidden, and slider1-sm is showing. 
479 < width < 768 => slider1-lg and slider1-sm are both showing. 
width > 768 => slider1-lg is showing, and slider1-sm is not showing.

中間情況是一個問題。而且，slider-lg和slider-sm應該是類，而不是id;並應該在圖像上，而不是divs。顯示：無;在div上可能會覆蓋輪播的CSS並破壞事物。

來源

2015-12-11 04:38:37

不能肯定地說，因爲沒有撥弄工作，甚至任何想法是什麼你正在使用的旋轉木馬，但做顯示：無;只會混淆旋轉木馬，因爲它會穿過每個div，其中一些不會顯示。您最好使用自己的圖像/隱藏圖像本身

例如

<div class="item active"> 
    <img id="slider1-lg" src="img/slider/slide-01-hm-1920.jpg" width="100%" height="100%"> 
    <img id="slider1-sm" src="img/slider/slide-01-hm-720.jpg" width="100%" height="100%"> 
</div>

來源

2015-12-11 04:23:15

用媒體查詢改變傳送帶圖像奇怪的錯誤

回答

相關問題