How to set the container height automatically maintaining the ratio - html

Question

I have an img object within a div object. I want to set the width of img (or div) and have its height set automatically to whatever is necessary to retain the original ratio of the image.
Suppose I set the width to 200px, which is shorter than the image's natural width. When I do this:
HTML
<div id="container">
<img id="foo" src="foo.png">
</div>
CSS
#foo{
width: 200px;
}
or
#container{
width: 200px;
}
the img has the height set to whatever is necessary to retain the original ratio, but the outer div has the height set to the inner image's natural height, and top and bottom margins are inserted between the inner img and the outer div.
I want the outer div's height to be whatever is necessary to retain the original ratio of img so that the top and bottom margin between div and img would become zero. How can I do that?

Answer 1

Try this code
DEMO
<div class="container">
<img src="demo.jpg" alt="" />
</div>
body{
margin: 0;
}
.container{
width: 200px;
border: 1px solid red; //tmp added to check the height of container
}
.container img{
display: block;
width: 100%;
}

Answer 2

Use this function:
<script type="text/javascript">
function resizeHeight(){
var resizedImage = document.getElementById('foo');
resizedImage.style.height = (resizedImage.style.height * 200)/resizedImage.style.width;
resizedImage.style.width = '200px';
}
</script>
And edit your image line to this:
<img id="foo" src="foo.png" onload="resizeHeight()">
It should set the picture's width to 200 automatically, and resize the height proportionally.