Shawn Shawn - 2 months ago 17x
HTML Question

Fixed size of Flexslider

I'm using Flexslider to pull product images of varying sizes from an API. I've been throwing them into Flexslider's

, 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
, 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?


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;

Hope this helps!