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

Question

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

Answer 1

试试这个。

smoothHeight：true，

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

Answer 2

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

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

Answer 3

所以我遇到了同样的问题，我注意到的是我正在将图像宽度切割为确切的itemWidth值。诀窍是让实际图像比那个值大得多。因为如果插件不能将图像缩放得更大，那么就是实际尺寸。它可以减少它的宽度以保持宽高比。