Flexslider的固定大小

本文介绍了Flexslider的固定大小的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我使用Flexslider从API中提取不同大小的产品图片。我一直把它们扔到Flexslider的< ul> ，但是这些不同的图像尺寸不能很好地播放。当图像具有不同的高度时，Flexslider会很好地动画，但是我希望Flexslider具有固定的高度和宽度以适合我的布局。我尝试把整个事情放到一个固定大小的< div> ，但Flexslider完全忽略它，并溢出到布局的其余部分。是否有某种方法调整图像大小以适应Flexslider不调整大小？

I'm using Flexslider to pull product images of varying sizes from an API. I've been throwing them into Flexslider's <ul>, but these varying image sizes don't play well. Flexslider nicely animates when images have different heights, but I want to have Flexslider have a fixed height and width to fit in my layout. I've tried putting the whole thing into a fixed-size <div>, but Flexslider ignores it completely and overflows into the rest of the layout. Is there some way to resize images to fit so that Flexslider doesn't resize?

推荐答案

200像素x 200像素。将这些属性添加到flexslider.css文件中的以下选择器，您应该可以：

Let's say you wanted a fixed size of 200px by 200px. Add these properties to the following selectors in the flexslider.css file and you should be good to go:

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

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

希望这有助！

这篇关于Flexslider的固定大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

VARYING