User Ability = basic/beginner

I'm looking for help with the size of the images that are rendered in a block that is created to display content. It seems that no matter what I set my image size to, the flexslider block sets the image to 682 x 485. If I use a smaller resolution, the image is stretched and skewed and becomes really distorted.

The modules I have enabled are:
Flex Slider 7.x-1.0-rc3
Flex Slider Fields 7.x-1.0-rc3
Flex Slider Views Slideshow 7.x-1.0-rc3
Flex Slider Views Style 7.x-1.0-rc3

Theme: Bartik

Drupal 7.15

The slideshow works just fine, I just cannot get the images to scale correctly without distortion.

I appreciate the help!


martichka5’s picture


I have same issue. I need two sliders on one page and that s ok and flexslider works without problems. The only one problem that appeared was that i could not change the size of the second slider. I need it to be smaller than than first. I created image style and used it in the image field i display in the view, but there was not any effect.

mkapst’s picture


marcoka’s picture

flexslider uses a max-width css property which stretches shrinks the images to fit the container. take a look at this

AmyKosh’s picture

And for this newbie- where would I be looking for that css? I'm working in a sub-theme of Adaptive Theme and so have co-opted the global.styles.css file for my own use. I can see that Flexslider css does not exists here. Where do I "look at this"?

xeniak’s picture

There's a solution here. The last comment explains the problem pretty well.

Dave Bagler’s picture

AmyKosh, you can see the CSS that sets the image sizes to be the size of the container in the FlexSlider library. Alternatively you can use the inspect element tool of your browser. With that said I don't recommend changing that behaviour.

FlexSlider creates responsive sliders so the CSS is written to resize the images based on screen size. To change the size of the slides try styling the container to be the desired height and width (careful not to render the slider unresponsive in the processes) and make sure that the images you upload (or the image style you use to render the images in the slider) are at least the as large as the maximum size of the container to avoid upscaling.

Dave Bagler’s picture

Assigned: Unassigned » Dave Bagler
Issue summary: View changes
Status: Active » Closed (works as designed)
kerrycurtain’s picture

Ran into a similar problem. Thumbnail images nice and crisp but main flex slider image blurry. Found the solution in the flex slider config. Turned off 'picture mapping' .