自动调整图像大小以适合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;}
}

Answer 2

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

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