HTML/IE: stretch image to fit, preserve aspect ratio

Question

In an HTML window, I am setting a custom body

<img src="file://[filename]">

to display an image.

Now I want to strectch the image to fit the available window, but preserve aspect ratio.

<img src="file://[filename]" width="100%" height="100">

stretches but also distorts the image.

Is there some HTML trickery to do that? IE only solution is fine, since this is in a hosted broweser control.

Answer 1

If you want to preserve aspect ratio, you only need to specify one dimension ie:

<img src="file://[filename]" width="100%" alt="" />

You can use javascript to determine max dimension and resize accordingly

<script type="text/javascript">
function getImgSize(id){
var pic = document.getElementById(id);
var h = pic.offsetHeight;
var w = pic.offsetWidth;
alert ('The image size is '+w+'*'+h);
}
</script>

Answer 2

If you know either the height or width, you can set only that. The other dimension will be automatically set based on the aspect ratio of the image.