Search code examples
cssflexslider

Flexslider fixed image

I am using flexlider within shopify. I would like the images within the slider to have a fixed size with css but always spread 100% in width without looking squashed in height. So if I'm uploading an image thats 597px height, I would need it to display in 450px but the aspect ratio to remain the same. Is there a way to do this with flexslider?

Solution

  • In flexslider.css you have an style rule:

    .flexslider .slides img {width: 100%; display: block;}

    Which you may replace with something like this:

    .flexslider .slides img {width: auto; height: auto; max-width: 100%; max-height: 100%; margin: 0 auto; vertical-align: middle;}

    Please let me know if that helped you.