Fixed Height of Images

You could create a new Image style (Config > Media > Image styles) and set it to Scale and crop to 250px high.

Then in your Flexslider settings (Config > Media > Flexslider - edit the settings you are using) choose this new image style for the 'Normal image style'.

Then in your View settings (Structure > Views - edit the View that is producing the slideshow), edit the image field to use the image style we just created.

Hi there.

Because you've mixed landscape and portrait images together the container is staying at the height of the largest image - the portrait image. The portrait image is higher than it should be because the CSS has 'width: 100%' which is stretching it to the same width as the landscape images, and therefore blowing the height out of proportion.

I would recommend sticking to one format of images for the sliders, ie: scale them all to 500x250 or something. If you wanted to mix two formats then you could override the...

.flexslider .slides img {
  width: 100%;

...to be width: auto, but this means your flexslider won't be responsive any more.

You just need to override the width: 100% in the CSS - this stretches (upscales) the images to fit the container.

So just add:

.flexslider .slides img {
  width: auto;
}

to your CSS. But like I said, this stops the slideshow being responsive.

As I said in #3 - the images are being stretched because of the mix of portrait and landscape images.

For the best results using Flexslider I think all your images should have the same width AND height. But this is a design decision.

There is also an option to animate the height of the Flexslider. You could try this first in: Config > Media > Flexslider - edit the settings > Smooth height.

Flexslider will always make the images fit the container (that's kind of the point :-P)

If you control your container size, your images/slideshow will follow.

Like you say, that's sort of the point, so this works as designed. Reopen if needed.

> Reopen if needed.

Re-opening.

The point of Flexslider is: to be responsive - to keep the image within the constraints of the containing browser window. No one is complaining about that behavior.

That is not the same as saying "to force the image to fit the containing browser window," which is what we're doing right now.

The goal here is to downscale images when viewed in a browser window or container that is smaller than the image itself. If the images are upscaled when the container is larger than the image, that is reasonably a problem - not a part of our goal to "be responsive". In fact it makes it almost useless for portrait layout images... a fact that's attested by the many issues in the queue about this issue.

I understand that width: 100% comes from Flexslider itself, actually in the library that we download on the fly. So let's talk about ways to override it.

I've attached a first-stab patch for this. It unsets the width: 100%, and instead uses max-width: 100% to achieve the responsive behavior. Width of the slider is maintained by styling the views field div so IT is width: 100%. Then the image can be centered inside it with margin:auto. In my own testing this maintains the responsive image downscaling, and eliminates the upscaling.

Same question. Did someone come up with a solution for mixing portrait and landscape images in one slider, side by side with padding and same height, instead of fixed proportions? I am trying to achieve this behavior found in owl carousel: http://www.owlcarousel.owlgraphic.com/demos/autowidth.html

Thanks in advance.

I'm having a similar problem with image height. I have a 1180px max-width responsive site. As an experiment, I have Drupal image styles crop & scaling images to 1180px by 400px high, and I can see in the browser inspector that img elements in my Flexslider have the correct width and height attributes that I set--1180px x 400px. I do not have any fixed heights on container elements in my CSS, and I've gone through all the containing elements in the browser inspector and cannot find a fixed height. Flexslider is increasing the height of my images, which should be 400px high, to 537px high and I cannot figure out why. I see they have height auto on them in the module's CSS, and if I override that, they get a 400px height. But since I cannot find a fixed height container that they'd be auto-resizing to, and they are 1180px wide and so is the site, I am stumped.

(And yes I drush cc all-ed many times. :) )

#8 works for me. Thanx @ohthehugemanatee

For the moment I added

.flexslider .slides img {
  width:unset !important;
  max-width: 100%;
  margin: auto; 
}
.flexslider .slides .views-field {
  width:100%; 
}

with CSS Injector (Asset Injector)