Make responsive image fit parent container

Question

I\'ve been trying to figure out if there is a pure CSS solution to ensure the image within my banner doesn\'t go below the height of the parent but keep ratio of the image.<

Answer 1

Instead of using an < img > tag, I made that image the background-image for a div and gave it the following styles:

.banner_holderImage{
    height: 100%;
    position:relative;
    background:   url("http://placekitten.com/g/800/600")no-repeat;
    background-size: cover;
    background-position: center;
}

here's the fiddle I was using: http://jsfiddle.net/MathiasaurusRex/LkxYU/4/

Here's the complete HTML and CSS:

--

.banner_holder{
    width: 100%;
    height: 300px;
    min-height: 200px;
    position: relative;
    outline:1px dotted red;
}

.banner_holderImage{
    height: 100%;
    position:relative;
    background:   url("http://placekitten.com/g/800/600")no-repeat;
    background-size: cover;
    background-position: center;
}