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

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.