Javascript Flexslider的固定大小

我使用Flexslider从API中提取不同大小的产品图像。我已经将它们放入Flexslider的

，但是这些不同大小的图像不能很好地播放。当图像具有不同高度时，Flexslider可以很好地设置动画，但我希望Flexslider具有固定的高度和宽度以适合我的布局。我尝试将整个内容放入固定大小的

，但Flexslider完全忽略了它，并溢出到布局的其余部分。是否有一些方法可以调整图像大小，使Flexslider不调整大小？

假设您希望固定大小为200px乘以200px。将这些属性添加到flexslider.css文件中的以下选择器中，您就可以开始了：

.flexslider {
    width: 200px;
    height: 200px;
}

.flexslider .slides img {
    width: 200px;
    height: 200px;
}

---

希望这有帮助

使用特定div的样式选项设置大小，如下所示，有两个不同大小的滑块：

<div class="flexcontainer">
    <div id="first-slider" class="flexslider" style:"width:100px">
        <ul class="slides">
        ...
        </ul>
    </div> 
    <div id="second-slider" class="flexslider" style:"width:200px">
        <ul class="slides">
        ...
        </ul>
    </div> 
</div>

...


...

具有类“.flex viewport”的元素是幻灯片的容器，该元素将其高度调整为集合中较高的图像，技巧是将所有图像高度设置为0，但当前幻灯片中的图像除外，该图像位于具有类“.flex active slide”的li元素内flexslider脚本在幻灯片交换位置时切换，这个技巧唯一的缺点是，在新幻灯片放置到新位置后，类的切换会发生，然后会发生口吃，但您可以通过使用javascript将某些toggleClass绑定到触发幻灯片更改的同一事件来处理这个问题，帮助就是帮助

.flex-viewport  li:not(.flex-active-slide) img{ 

height: 0 !important;
}

除去

smoothHeight: true,

从

---

通过脚本将宽度更改为400

$('.flex_up').flexslider({
    animation: "slide",
    animationLoop: false,
    itemWidth: 400,
    itemMargin: 5,
}); 

---

您是否尝试将overflow:hidden添加到您添加的div中？这似乎效果不错，但非方形图像可能会失真。有没有办法调整图像大小以自动适应该正方形而不失真？您指定需要固定的高度和宽度，以便Flexslider不会调整大小。为了适应不同比率的图像，Flexslider必须更改其尺寸以适应新图像。我提供给您的代码可以更改为固定大小以适合您的布局（例如：960 x 540），但它取决于每个图像都具有相同的固定大小。有没有一种方法可以在照片编辑器中重新裁剪和调整图像大小以解决此问题？我从API中提取这些分类图像，因此无法使用Photoshop或类似的工具整体调整它们的大小。对不起，我不清楚：/好的，我已经调整了大小来处理这个（），但是它们没有居中。不过，这应该是最简单的部分。谢谢你的帮助！美好的谢谢分享，我肯定对这个感兴趣，我会看一看。谢谢你，祝你好运！动态高度呢？如果每张幻灯片都有自己的ID，那么最好不要使用内联CSS。不确定这是哪个版本，但我看不到当前版本的flex viewport类，所以只需将其添加到lis的包装器中即可。我的是幻灯片（默认），但它可以在配置中被覆盖。

$('.flex_up').flexslider({
    animation: "slide",
    animationLoop: false,
    itemWidth: 400,
    itemMargin: 5,
});