使用媒体查询更改轮播图像奇怪的错误

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

无法确定，因为没有 fiddle 可以使用，甚至不知道您正在使用什么轮播，但正在做 display:none；只会混淆轮播，因为它会遍历每个 div，其中一些不会显示。你最好在图像本身

上使用你的 show/hide

例如

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

Answer 2

图元

图片元素是响应式图片问题的官方解决方案，但目前还不是所有浏览器都支持（虽然有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 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 应该是类，而不是 ids；并且应该在图像上，而不是 divs。 display:none;在 div 上可能会覆盖轮播的 CSS 并破坏东西。

使用媒体查询更改轮播图像奇怪的错误

Changing carousel images with media queries strange bug

html

css

carousel

twitter-bootstrap-3