html - flexslider image size cover -

html - flexslider image size cover -

for personal site http://stevengeorgeharris.com have created single page design several divs stacked on top of each other. divs width: 100% , height: 100% scale browser, within each div using flexslider create fullscreen slideshow.

my problem when browser gets narrower images within flexslider container scale downwards leaving whitespace below.

this css flexslider image.

.flexslider .slides img {width: 100%; height:auto; display: block;}

is there anyway create images deed http://css-tricks.com/examples/fullpagebackgroundimage/css-1.php

for should utilize media query. can read more media query here : https://developer.mozilla.org/en-us/docs/css/media_queries

i did wanted do; image , can see final result here: http://jsbin.com/olakit/2

here code (the original image 1024 x 683 px ):

img { width: 100%; height : 100%; } @media (min-width: 2000px) { img{ height: auto; } }

notice "min-width" should more picture's width.

html css flexslider