max-width image resizing to parent div

I needed an image inside a div that was positioned absolutely with spacing around it and the browser. The image inside should respect its parent boundary.

HTML

<div id="main">
    <img src="http://placehold.it/200x200" />
</div>

CSS

#main {
    position: absolute;
    bottom: 0;
    top: 0;
    border: #000 thin solid;
    background:#DDEEFF;
    width:100%;
}

JavaScript

$(window).resize(function() {
  $('#main').height($('#main').width());
});