Make responsive image fit parent container - html

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.
You can see a demo here: http://jsfiddle.net/LkxYU/1/
html:
<div class="banner_holder">
<img src="http://placekitten.com/g/800/600"/>
</div>
css:
.banner_holder{
width: 100%;
height: 300px;
min-height: 200px;
position: relative;
outline:1px dotted red;
}
.banner_holder img{
width: 100%;
}
My aim is to have the image always 100%, but never below 300px in height. This would mean image cutoff, but thats fine, i just want to know if there is a pure CSS solution, or if i need to use jQuery

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:
<div class="banner_holder">
<div class="banner_holderImage"></div>
</div>
--
.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;
}

Answer 2

Your image will inevitably be out of ratio depending on the screen size, why not try a background image:
.banner_holder{
width: 100%;
height: 300px;
min-height: 200px;
position: relative;
outline:1px dotted red;
background: url('http://placekitten.com/g/800/600') center no-repeat;
background-size: cover;
}
or you could just add a max height to your image tag:
.banner_holder img{
width: 100%;
max-height: 300px;
}

Answer 3

try:
.banner_holder img{
height: 100%;
/* OR */
height: inherit;
}

Answer 4

Use max-height and max-width to be sure that image will always fit the parent div:
.banner_holder{
width: 200px;
height: 300px;
position: relative;
outline:1px dotted red;
}
.banner_holder img{
max-width: 100%;
max-height: 100%;
}
EDIT: Sorry, I miss the part where you wrote about 300px cut-off stuff :) MathiasaurusRex's answer is correct.