如何让 Flexslider 在 iOS 上显示不同纵横比的图片？
Posted
技术标签:
【中文标题】如何让 Flexslider 在 iOS 上显示不同纵横比的图片？【英文标题】：How to make Flexslider display different aspect ratio images on iOS? 【发布时间】：2013-06-29 14:19:40 【问题描述】：我在 ios 设备上遇到了与 Flexslider 类似的问题，该问题与 this unanswered question 中报告的问题相似。具有不同纵横比图像的幻灯片可以在 OSX Safari 和我尝试过的所有其他浏览器（甚至 IE8）上正确显示，但在使用 Safari 或 Chrome 的 iOS 5 或 6 上则不能。 iPhone 和 iPad 都会出现此问题。
我首先在我为客户构建的大型响应式投资组合网站中注意到这一点，并认为这可能与不寻常的配置有关，包括在使用 Ajax 时拉动滑块。事实证明，我能够将其简化为一个简单的示例。以下是 iOS 和 OSX Safari 中示例的屏幕截图。
这个例子非常简单，使用了 jQuery 1.10.1 和 jQuery.flexslider 2.1。你可以找到a working example on my website。代码如下：
<!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 调整，例如将图像更改为 display:inline，以及弄乱边距和填充。这些都没有让它变得更好。
我的问题是： 您如何让 Flexslider 在 iOS 上正确显示短幻灯片，或者您知道在具有不同纵横比幻灯片的响应式网站中效果很好的滑块吗？
【问题讨论】：
我一直找不到解决方案，但使用 BXSlider 和adaptiveHeight 选项我得到了一个工作。 @jsheffers 请将其发布为答案，如果没有更好的答案，我可以将赏金奖励给您。到目前为止，使用 BXSlider 的建议是最好的答案。 【参考方案1】：目前看来，Flexslider 提供的功能无法实现。我最好的选择是使用具有adaptiveHeightoption 的 BXSlider。
【讨论】：
【参考方案2】：如果您的图片大小都与您需要的不同，请将容器的高度设置为固定值并将内容设置为overflow:hidden;
类似
.flexslider
height: 300px;
overflow: hidden;
您可以包含一系列基于视口高度的媒体查询，以在一定高度范围内调整该高度。
【讨论】：
这并不能解决问题，而是将问题扩展到非 iOS 系统。图像的纵横比不同，在 OSX 和 Windows 上可以正常显示，但在 iOS 上不能正常显示。基本上iOS使它们都具有相同的高度，基于将宽度缩放到为容器指定的值后的最高值。【参考方案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://***.com/a/21491781/3259159
【讨论】：
以上是关于如何让 Flexslider 在 iOS 上显示不同纵横比的图片？的主要内容，如果未能解决你的问题，请参考以下文章
flexslider 中的 GIF 滑块，如何仅在滑块上开始 gif
如何让 iOS 在 tableView 上显示删除按钮，但不允许从右侧完全滑动删除