flexslider with fixed height while keeping image aspect ratio with overflow hidden - html

Question

Been searching for hours now. I want flexslider for a kind of banner rotator on a page. I managed to get a fixed height for the images. But the width of the images get stretched to the browsers borders left and right. I believe what i want is some kine of "overflow: hidden". If browser_width > img_width: show background left and right from the image. If browser_width < img_width: Cut of parts from the image on left and right side. All ways keep the aspect ratio.
Currently the image gets stretched/shrinked horizontally.
HTML
<div class="flexslider">
<ul class="slides">
<li>
<div class="flexslider_image">
<img src="/images/alnwick-castle-92607.png" />
</div>
</li>
<li>
<div class="flexslider_image">
<img src="/images/server-90389.png" />
</div>
</li>
</ul>
</div>
CSS
.slider_container {
margin-top: -120px;
}
.flexslider {
border: none !important;
box-shadow: none;
margin:0px;
padding: 0px;
}
.slides li {
background-position: center;
-webkit-backface-visibility: hidden;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.flexslider_image {
}
.flexslider_image img {
height: 500px;
}

Answer 1

After searching for some more hours i found a solution.
Do not use an img-tag for the image. Instead use a div with a background image. For details see my html and css.
Another advantage i was locking for anyway is, that one can now more easily place content on the slides.
HTML
<div class="flexslider">
<ul class="slides">
<li>
<div class="flexslider_background" style="background: url('/images/server-90389.png') no-repeat center;">
<div class="flexslider_content">
<p>
Hallo Test 2
</p>
</div>
</div>
</li>
<li>
<div class="flexslider_background" style="background: url('/images/minecraft-938604.png') no-repeat center;">
<div class="flexslider_content">
<p>
Hallo Test 3
</p>
</div>
</div>
</li>
<li>
<div class="flexslider_background" style="background: url('/images/minecraft-669310.jpg') no-repeat center;">
<div class="flexslider_content">
<p>
Hallo Test 4
</p>
</div>
</div>
</li>
</ul>
</div>
CSS
.slider_container {
margin-top: -120px;
}
.flexslider {
border: none !important;
box-shadow: none !important;
margin:0px !important;
padding: 0px !important;
margin-bottom: 10px !important;
background-color: #eee !important;
}
.slides li {
background-position: center;
-webkit-backface-visibility: hidden;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.flexslider_background {
height: 500px;
text-align: center;
}
.flexslider_content {
display: inline-block;
margin-top: 145px;
height: 350px;
width: 1000px;
border: 3px solid black;
}
.flexslider_content p {
float: left;
font-size: 2em;
}