Full Width Slider Images

I am having a time with the CSS slider.

I want a full-width slider across the top of the listings page. I want it 500px deep and I want the image to fill the entire area proportionally. (Yeah, it will crop some images which is fine.) You all have suggested the width at 100% for the img in another post but all that does is stretch the image in one direction.

.geodir-listing-slider-widget {height: 500px;}

.geodir_flexslider .geodir-slides img {width: 100%;}

.geodir-slider-title {font-size: 24px; background: #f47a20;}

#geodir_widget_carousel.geodir_flexslider.flexslider-ltr {display: none;}

With this, I get a 500px deep widget area with an orange bar and larger font with the thumbnail previews hidden. Totally digging all that until it gets to the actual image for the slider and I get a 200px high, 100% wide distorted image. I have played with the auto functions for width and height only for them to do nothing.

I am trying my best to wrap my head around this CSS and am using the developer tools in Chrome to experiment but I am at a loss with this bit.

By the way, this would be a great feature for the slider widget in the future. Much like your full-width map does, have it be full-width and then give the option of the height. Have the images cover the area. It would certainly be a selling point for getting people to upgrade to featured listings to be part of a full-width slider.

Thanks!