如何使Flexslider在iOS上顯示不同的長寬比圖像？

Question

我在iOS設備上遇到了Flexslider的問題，該問題似乎與此未解決的問題中報告的問題相似。 包含不同縱橫比圖像的幻燈片可以在OSX Safari和我嘗試過的所有其他瀏覽器（甚至是IE8）上正確顯示，但在使用Safari或Chrome的iOS 5或6上則不能正確顯示。 在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提供的功能目前看來不可能。 我最好的選擇是使用具有adaptiveHeight高度選項的BXSlider。

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() );
     }
  });
});

從我對這個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