Automatically resize images to fit Flex Slider

Question

I am learning how to use Flex Slider to create image and carousel sliders. However, Flex only seems good when all images have the same width and height.

The problem is listed on the following website:

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

The images are quite large, so please be patient while downloading.

My test site contains several images with different widths and heights. To fix this, I have to resize them so that they have the same width and height, and I also need to center them due to the ratio of width to height.

So, I would like to know if:

• Is there a way for Flex Slider to do this?
• Is there any way to do this without changing the library code?

To answer this question, I found the following articles:

• Fixed Size Flexslider - This solution actually cuts all images to a specific size, ignores the ratio of width to width. It also requires me to change the library myself.
• Make Flex suitable for the user's screen. Regardless of screen size - I really don't understand how this relates to Flex Slider: S

I appreciate any help possible, Pedro.

Answer 1

Well, I spent a lot of time on this, so I could also try it on my own question. I solve this problem 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 user's physical screen had a width> 959px (I have), it will be css applied to all 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 result in the resizing of ALL IMAGES (ignoring the difference in size) to 50% of their original size and will only be centered then HORIZONTAL. It turns out to center them vertically and resize them depending on their t

Answer 2

To solve this problem, I use CSS - the fastest and easiest 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 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; }