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.

Whereupon

You should never link to a file on an online storage like Dropbox, because the file may be deleted in the future; therefore it is no good for the community coming to your question looking for a solution to their own problem. In the future, please replicate the problem in an online code editor such as jsfiddle – Despumate

Answer 1

Well, I wasted a lot of time with this, so I might as well give it a try in my own question. I am solving this issue with css3:

@media only screen and (min-width: 959px) {
    .img {
        max-width: 50%;
        max-height: 50%;
        display: block;
        margin-left: auto;
                margin-right: auto;
    }
}

In this case, if the physical screen of the user had width > 959px (mine has) this will be the css applied to all the images. The following HTML illustrates this:

<ul class="slides">
                    <li>
                            <img src="image/Bastion_Digital_Art_Pack_PNG/Bastion_0_Foreward.png" />
                    </li>
                    <li>
                        <img src="image/Bastion_Digital_Art_Pack_PNG/Bastion_1_Calamity.png" />
                    </li>
                    <li>
                        <img src="image/Bastion_Digital_Art_Pack_PNG/Bastion_1_CalamityKid.png" />
                    </li>
                    <li>
                        <img src="image/Bastion_Digital_Art_Pack_PNG/Bastion_1_ColdWarKid.png" />
                    </li>
                    <li>
                        <img src="image/Bastion_Digital_Art_Pack_PNG/Bastion_1_KidThinking.png" />
                    </li>
                    <li>
                        <img src="image/Bastion_Digital_Art_Pack_PNG/Bastion_1_KidVsScumbag.png" />
                    </li>
                </ul>
            </div>

This will resize ALL IMAGES (ignoring size difference) to 50% of their original size, and will only center then HORIZONTALLY. Turns out that to center them vertically, and to resize them depending on their t

Whereupon

Answer 2

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;}
}

Halle

how will that center the image? :S I have to try, thanks for trying! – Whereupon

This could change your image or slider size on different resolutions, so you will be able to modify all your content as you want :) Also you can add more CSS and make more custom things here, not only change images size. I'm using this CSS3 stuff for responsive design, hope this will help... If you will have more questions, don't be hesitated to ask... – Halle

Alright, your solution allows me to draw something different depending on the size of the physical screen the user has. However, I still don't know how to address the fact that I have several images with very different sizes. Is there a way in css to resize automatically based on their width-height ratio? – Whereupon

Answer 3

Alternatively you can crop your images by adding the following properties to existing selectors:

.flexslider .slides > li {
  overflow:hidden;
  position:relative;
  height:400px; /* desired height here */
}
.flexslider .slides img {
  height:auto;
}

Provost