Scaling img with CSS

Question

I'm trying to do specific scaling using css. below is an image of what I'm after. The image will be 300px from the top of the browser page. Above it will be static test.
I want the image below the text to scale proportionally with the browser. Keeping all the image intact and not cutting off the bottom or having to scroll for the bottom of the image.

The image below is a representation of the browser window. The browser also has an option to go fullscreen so it should be able to scale .

I have tried using width 100% and height auto on the img tag but that's not exactly what I'm after.

below code kind of works but then when I move the image down to give way for the top text the bottom of the image gets cut off. I need that to scale up to the browser bottom.

#photo-container{
    margin-top: 200px;

    img{
        min-height: 720px;
    max-height: 100%;
    height: 100%;
    width: auto;
    }
}

If it's not possible with CSS is there a js option?

Answer 1

For anyone having this same issue here is how I got around it. Not sure I could do it with just CSS.

HTML

    <div id="photo-container">
        <img src="img/bla.jpg"/>
    </div>

CSS

#photo-container{
    position:relative;
    top: 200px;
    overflow: hidden;
    text-align: center;

    img{
    max-height: 100%;
        max-width: 100%;
    width: auto;
    }
} 

JS

$(document).ready(function(){
    var photoContainer = $('#photo-container');
    var top = photoContainer.position().top;

    $(window).on('resize', function(){
        var browserH = $( window ).height();
        photoContainer.height(browserH - top);
    });

    $(window).trigger('resize');

});

Answer 2

scale proportionally

background-image: url(oneimage.jpg);
/*background-attachment: fixed;*/
top: 0px;
left: 0px;
background-size: cover;
background-position: 50% 50%;
background-repeat: none;