How to make Flexslider display different aspect ratio images on iOS?

问题

I've encountered a problem with Flexslider on iOS devices that seems similar to the problem reported in this unanswered question. 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. The problem occurs on both iPhone and 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. 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.

The example is very simple and uses jQuery 1.10.1 and 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. 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?

回答1:

It doesn't look like it's currently possible with what Flexslider provides. My best alternative was to use BXSlider which has an adaptiveHeightoption.

回答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;

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.

回答3:

Something like that?! Customized according to your example ;) (flexslider 2.1 tested)

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

来源：https://stackoverflow.com/questions/17381153/how-to-make-flexslider-display-different-aspect-ratio-images-on-ios

标签

javascript

ios

ipad

responsive-design

flexslider