html - 如何让不同的图像显示在不同屏幕尺寸的 jQuery slider 插件中？

Question

我正在尝试让我的 jQuery slider 插件显示移动和 iPad 设备的纵向图像，以及大屏幕设备的横向图像。但是，我没有成功。我尝试了几种策略，但都没有奏效。如果您知道如何执行此操作，将不胜感激您的帮助。

HTML

<div id="container">
    <div id="slider" class="nivoSlider">

        <img src="../Images/islal11.JPG" data-thumb="../Images/islal11.JPG"  alt="Little girl wearing Tomatis headphones"  class="image large"/>
        <img src="../Images/bellal12.jpg" data-thumb="../Images/bellal12.jpg"  alt="Girl with Tomatis headphones two"  class="image large"/>
        <img src="../Images/islal12.JPG" data-thumb="../Images/islal12.JPG"  alt="Little girl wearing Tomatis headphones 2"  class="image large"/>

        <img src="../Images/bellap11.JPG" data-thumb="../Images/bellap11.JPG" alt="Girl with Tomatatis headphones" class="image small"/>
        <img src="../Images/islap11.JPG" data-thumb="../Images/islap11.JPG"  alt="Little girl wearing Tomatis headphones"  class="image small"/>
        <img src="../Images/islap12.jpg" data-thumb="../Images/islap12.jpg"   alt="Girl with Tomatis headphones two"  class="image small"/>

    </div> <!--closing slide div-->
</div><!--closing container div-->

Answer 1

给你的 #slider id 一个 max-width inside you're css。

#slider{
    max-width: 640px;
}

您可以使用@media 根据移动尺寸给出最大宽度或最大高度: http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

希望对您有所帮助。