Hello, I am trying to get some javascript to programatically adjust a html img tag's width to display various sized images correctly.
I have a fixed width img tag at 800px to display an image, this is the max width.
If the image is wider then 800px I want to display it at 800px wide;
If the image is less than 800px wide I want to preserve its width to avoid stretching it.
I use this html/javacript code to get a partial solution:
<html>
<head>
<script type="text/javascript">
<!--
function resize_image( id )
{
var img = document.getElementById( id );
var normal_width = img.width;
img.removeAttribute( "width" );
var real_width = img.width;
if( real_width < normal_width )
img.width = real_width;
else
img.width = normal_width;
}
//-->
</script>
</head>
<body>
<img id="myimage" onload="resize_image(self.id);" src="IMAGE.JPG" width="800" />
</body>
</html>
The above code seems to work on all browsers I have tested except Safari (images don't display unless you refresh the page).
I know I can use CSS max-width but that wont work on IE < 7 which is a show stopper.
How can I get this working for all browsers? Many thanks in advance.