max-height max-width 100% but stretching image while resizing browser
<p>I have the following code:</p>

<pre><code>#containerDiv{
    width:40%;
    height:60%;
    position:absolute;
    bottom:0px;
    right:0px;
}

#myImage{
    position:relative;
    max-width:100%;
    max-height:100%;
}

&lt;div id="containerDiv"&gt;
     &lt;img id="myImage" src="img.jpg" /&gt;
&lt;/div&gt;
</code></pre>

<p>When I'm resizing the browser it usually works well, but sometimes it will ignore max-height and stretch the image so that it fits the entire width of the parent div box. How do I fix it?</p>