Question

我有这个旋转木马，我需要根据媒体大小更改图像，我使用这个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>

Answer 1

图片元素

Picture element是响应式图像问题的官方解决方案，但并非所有浏览器都支持它（尽管有polyfill）

 <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 Rocks博客： http://www.html5rocks.com/en/tutorials/responsive/picture-element/

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

polyfill： 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应该是class，而不是id;并且应该在图像上，而不是div。显示：无;在div上可能会覆盖旋转木马的CSS并破坏东西。

Answer 2

不能肯定地说因为没有小提琴可以使用，甚至不知道你正在使用什么旋转木马，但是做显示：无;只会混淆旋转木马，因为它将逐步通过每个div，其中一些不会显示。你最好在图像上使用你的秀/隐藏

e.g。

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

用媒体查询更改轮播图像奇怪的bug

2 个答案: