flexslider with fixed height while keeping image aspect ratio with overflow hidden
<p>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 &lt; img_width: Cut of parts from the image on left and right side. All ways keep the aspect ratio.</p>

<p>Currently the image gets stretched/shrinked horizontally.</p>

<p>HTML
    </p>

<pre><code>&lt;div class="flexslider"&gt;
    &lt;ul class="slides"&gt;
        &lt;li&gt;
            &lt;div class="flexslider_image"&gt;
                &lt;img src="/images/alnwick-castle-92607.png" /&gt;
            &lt;/div&gt;
        &lt;/li&gt;
        &lt;li&gt;
            &lt;div class="flexslider_image"&gt;
                &lt;img src="/images/server-90389.png" /&gt;
            &lt;/div&gt;
        &lt;/li&gt;

    &lt;/ul&gt;
&lt;/div&gt;
</code></pre>

<p></p>

<p>CSS</p>

<pre><code>.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;
}
</code></pre>