How do you make flexslider images responsive?

Question

Currently, I am using width: 100% to make my image scale with the window size.

I would like to know how I can make the image scale down and not become distorted.

Answer 1

I simply changed the image width too width: 100% and changed height to height:auto to fix this for anyone that might need to know.

eg.

img {
    width: 100%;
    height:auto;
}

EDIT:

To ensure image widths don't go larger than their containers

img {
    max-width: 100%;
    width: 100%;
    height:auto;
}

Answer 2

I did this and it worked out for me. I did not want the big slider on the homepage so i resized it, then i found out it was not responsive anymore. I added some codes and tested it, some did not work, some did. Finally this is the code to and resize the slider, and keep it responsive!!

.flexslider {max-width: 700px; margin: -20; padding: 0;}
.flexslider .slides > li {display: none; -webkit-backface-visibility: hidden;} /* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides img { 
 display: block;
 max-width: 100%; height: auto; margin: - auto;
}

 }