Vertically Responsive Design: Scaling an image proportionally in div

Question

I found this very useful site Vertically Responsive Design : Keeping Things Above The Fold where its shown how to create div that scales text within it when adjusting the browser window height (not width).

What i'm searching for is to do the exact same thing but with an image. In other words an image that scales in and out when adjusting the browser window height while keeping it's proportions.

Anyone have any suggestions?

Thanks!

UPDATED: Fiddle here: https://jsfiddle.net/1pu67mLg/

This is the HTML for the text (from nitinh.com):

<div class="container">
        <div class="hero-unit">
            <div class="text">
                <h1>lorem ipsum dolor sit amet</h1>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis euismod felis. Phasellus id pretium dui proin finibus.
                </p>
                <p>
                    Lorem ipsum dolor sit amet <a href="#">article</a>.
                </p>
            </div>
       </div>
</div>

And the CSS (from nitinh.com):

.container{
    min-width:600px;
    max-width:1080px;
    min-height:100%;
    width:150vh;
    margin:0 auto;
    font-family:'Lato',sans-serif
}

.hero-unit{
    min-width:600px;
    max-width:1080px;
    min-height:calc(690px * (90/150));
    height:90vh;
    width:150vh;
    background-color:#2fa1b2;
    position:relative;
    box-sizing:border-box;
    padding:10px 30px
}   

.hero-unit h1{
    font-weight:400px;
    font-size:7vh
}

.hero-unit .text{
    font-weight:100;
    font-size:4vh;
    color:#fff
}

Answer 1

If I understand your question correctly, you want to add an image that scales based on the height of the view-port. If so you just want to scale the image similarly to your text just add a normal img tag and use vh units like so:

HTML

<img src="http://placehold.it/350x150" alt="">

CSS

.hero-unit img{
  height: 40vh;
  width: auto;
}

jsfiddle