在flexslider中动态改变#container div的高度答案

【问题标题】：dynamically changing height of #container div in flexslider在flexslider中动态改变#container div的高度
【发布时间】：2012-05-02 14:25:03
【问题描述】：

我正在使用 flexslider，并且容器 div 有一个背景图像，其作用类似于设置在其底部的边框。我需要做的是让容器 div 像实际的 flexslider div 一样响应。因此，当您从右向左缩小窗口时，容器 div 的高度应该改变高度，如果这有意义的话。图像尺寸为 1680x748。目前容器 div 的高度为 805px，宽度设置为 100%。所以宽度并不重要。只需要改变高度。

【问题讨论】：

标签： jquery flexslider

【解决方案1】：

试试这个。

smoothHeight: true,

function _flexslider(){
  $('.flexslider').flexslider({
    animation: "slide",
    animationLoop: false,
    pauseOnHover: true,
    smoothHeight: true,
    itemWidth: 280,
    itemMargin: 0,
    minItems: 1,
    maxItems: 1,
  });
}

【讨论】：

旧的。但就我目前所见，该选项无济于事。

【解决方案2】：

.flexslider .slides img 选择器将max-width 设置为 100%，但在 CSS 中添加 height: 748px;，它将使滑块达到该高度，这意味着您的所有图像都应该适合。

.flexslider .slides img {
     max-width: 100%; 
     height: 748px; 
     display: block;
}

【讨论】：

【解决方案3】：

所以我遇到了同样的问题，我注意到我正在将图像宽度切割到确切的 itemWidth 值。诀窍是让实际图像比该值大得多。因为如果插件无法将图像缩放得更大，那么就是实际大小。它可以只减小其宽度以保持纵横比。

【讨论】：