Automatically resize image to fit Flex Slider

Question

I am learning how to use Flex Slider to make image sliders and carousels. However, Flex only seems to be good when all the images are of the exact same width and height.

The problem can be seen in the following website:

https://dl.dropboxusercontent.com/u/785815/bastion/index.html

The images are quite big, so please be patient while loading.

My test website includes several images, with different width and height. To fix this I have to re-size them to have the same width and height, and I also need to center them because of the width-height ratios.

So, I would like to know if:

1. Is there a way for Flex Slider to do this?
2. Is there a way to do it without changing the library's code?

To answers this question, I found the follow articles:

• Fixed size of Flexslider - This solution will actually trim all the images to the defined size, ignore width-height ration. It also requires me to change the library itself.
• Make Flex Fit the Users' Screen.. No matter what screen size - I don't really understand how this one applies to Flex Slider :S

I appreciate any possible help, Pedro.

Answer 1

To solve this problem I'm using CSS - fastest & simplest way I think...

@media only screen and (max-width: 480px) {
    #your_slider_id_or_image_id {width:000px;height:000px;}
}
@media only screen and (min-width: 480px) and (max-width: 768px) {
    #your_slider_id_or_image_id {width:000px;height:000px;}
}
@media only screen and (min-width: 768px) and (max-width: 959px) {
    #your_slider_id_or_image_id {width:000px;height:000px;}
}
@media only screen and (min-width: 959px) {
    #your_slider_id_or_image_id {width:000px;height:000px;}
}