如何在iOS使Flexslider显示不同宽高比的图像？(How to make Flexslide

我以前遇到过，似乎类似报告的问题在iOS设备上使用Flexslider问题这个没有答案的问题。与幻灯片上正确OSX Safari和我已经尝试了所有其他的浏览器（甚至IE8），但不是在iOS 5或6使用Safari或Chrome不同的纵横比显示的图像。在iPhone和iPad出现问题。

我在一个大的响应组合的网站我建立了一个客户端首先注意到了这一点，并认为这可能与不同寻常的配置，包括在使用Ajax拉动滑块。事实证明，我能够将其降低到一个简单的例子。以下是iOS和OSX Safari浏览器的例子的屏幕截图。

这个例子很简单，用了jQuery 1.10.1和jQuery.flexslider 2.1。你可以找到我的网站工作的例子。下面的代码：

<!DOCTYPE html>
<html>
    <head>
     <meta name="viewport" id="viewport" content="initial-scale=1.0, width=device-width" />
     <script src="jquery.js" type="text/javascript"></script>
     <script src="jquery.flexslider.js" type="text/javascript"></script>
     <script type="text/javascript">
        jQuery(window).load(function() {
          jQuery('.flexslider').flexslider({
             controlNav:true, 
             animationLoop: true,
             slideshowSpeed:2000
          });
        });
    </script>
    <link rel="stylesheet" href="flexslider.css" />
    <style type="text/css">
        #example{
           width:100%;
           height:auto;
           max-width:400px;
           background-color:#f0f0f0;
        }
    </style>
</head>
<body>
    <h1>Flexslider iOS bug example</h1>
        <section id="example">
            <div class="flexslider">
                <ul class="slides">
                    <li><img src="tallslide.jpg"></li>
                    <li><img src="wideslide.jpg"></li>
                </ul>
            </div>    
            <p>Text after slider</p>
        </section>
   </body>
</html>

我试过无数的CSS调整，比如将图像切换到显示：内联，并与边距和填充搞乱。这些都不使它更好。

我的问题是：如何使Flexslider显示短幻灯片上正确的iOS或者你知道，在响应站点，不同的纵横比的幻灯片效果很好滑块的？

Answer 1:

它看起来并不像它目前可能有什么Flexslider提供。我最好的选择是使用BXSlider它有一个adaptiveHeight选项。

Answer 2:

如果您的图片都是不同的大小比你需要设置容器的高度为固定值，并设置内容是什么overflow:hidden;

就像是

.flexslider {
  height: 300px;
  overflow: hidden;
}

你可以包括一系列基于视口的高度来调整在一定范围内的高度的身高媒体查询。

Answer 3:

类似的东西？根据你的例子定制;）（flexslider 2.1测试）

jQuery(window).load(function() {
  jQuery('.flexslider').flexslider({
     controlNav:true, 
     animationLoop: true,
     slideshowSpeed:2000,
     after: function(slider){
       $(this).height( $(this).find('.slides > li').eq(slider.currentSlide).height() );
     }
  });
});

我以前回答这个问题计算器https://stackoverflow.com/a/21491781/3259159