如何使Flexslider在iOS上显示不同的长宽比图像？

Question

I've encountered a problem with Flexslider on iOS devices that seems similar to the problem reported in this unanswered question . 我在iOS设备上遇到了Flexslider的问题，该问题似乎与此未解决的问题中报告的问题相似。 Slideshows with images of different aspect ratios display properly on OSX Safari and all other browsers I've tried (even IE8), but not on iOS 5 or 6 using Safari or Chrome. 包含不同纵横比图像的幻灯片可以在OSX Safari和我尝试过的所有其他浏览器（甚至是IE8）上正确显示，但在使用Safari或Chrome的iOS 5或6上则不能正确显示。 The problem occurs on both iPhone and iPad. 在iPhone和iPad上都会发生此问题。

I first noticed this in a large responsive portfolio site I'm building for a client and thought it might be related to the unusual configuration including pulling the slider in using Ajax. 我首先在为客户构建的大型响应式投资组合站点中注意到这一点，并认为这可能与不寻常的配置有关，包括在使用Ajax时拉动滑块。 As it turns out I was able to reduce it to a simple example. 事实证明，我能够将其简化为一个简单的示例。 Here are screen shots of the example in iOS and OSX Safari. 以下是iOS和OSX Safari中示例的屏幕截图。

在此处输入图片说明

The example is very simple and uses jQuery 1.10.1 and jQuery.flexslider 2.1. 该示例非常简单，并使用jQuery 1.10.1和jQuery.flexslider 2.1。 You can find a working example on my website . 您可以在我的网站上找到一个有效的示例。 Here's the code: 这是代码：

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

I've tried numerous CSS adjustments such as changing the images to display:inline, and messing with margins and padding. 我已经尝试了许多CSS调整，例如将图像更改为显示：内联，并弄乱了边距和填充。 None of those made it any better. 这些都没有使它变得更好。

My question is: How do you make Flexslider display short slides properly on iOS or do you know of a slider that works well in responsive sites with slides of different aspect ratios? 我的问题是：如何让Flexslider在iOS上正确显示短幻灯片，或者您知道一个在纵横比不同的幻灯片的响应式站点中效果很好的幻灯片？

Answer 1

It doesn't look like it's currently possible with what Flexslider provides. Flexslider提供的功能目前看来不可能。 My best alternative was to use BXSlider which has an adaptiveHeight option. 我最好的选择是使用具有adaptiveHeight高度选项的BXSlider。

Answer 2

If your images are all different sizes than what you need to is set the height of the container to a fixed value and set the content to be overflow:hidden; 如果图像的大小都与所需大小不同，则将容器的高度设置为固定值，然后将内容设置为overflow:hidden;

Something like 就像是

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

You could include a series of media queries based on the height of the viewport to adjust that height over a range of heights. 您可以根据视口的高度添加一系列媒体查询，以在一定高度范围内调整该高度。

Answer 3

Something like that?! 那样的东西？ Customized according to your example ;) (flexslider 2.1 tested) 根据您的示例进行定制;）（经过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() );
     }
  });
});

From my previous answer to this stackoverflow question https://stackoverflow.com/a/21491781/3259159 从我对这个stackoverflow问题的先前答案中https://stackoverflow.com/a/21491781/3259159

如何使Flexslider在iOS上显示不同的长宽比图像？

问题描述

3 个解决方案

解决方案1
2 已采纳 2013-07-08 01:30:20

解决方案2
0 2013-07-04 15:24:13

解决方案3
0 2014-01-31 23:25:06

如何使Flexslider在iOS上显示不同的长宽比图像？

问题描述

3 个解决方案

解决方案1 2 已采纳 2013-07-08 01:30:20

解决方案2 0 2013-07-04 15:24:13

解决方案3 0 2014-01-31 23:25:06

解决方案1
2 已采纳 2013-07-08 01:30:20

解决方案2
0 2013-07-04 15:24:13

解决方案3
0 2014-01-31 23:25:06