HTML + Javascript: Dynamic Image Resize?

javascript html css resize-image
QAZ picture QAZ · Dec 16, 2008 · Viewed 11.8k times · Source

I am trying to get some JavaScript to programmatically 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:

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.

Answer

bezmax picture bezmax · Dec 16, 2008

I have never seen a safari in work, but you can try changing your onload event to this:

onload="resize_image(self.id);return true"

It could be that without a return value, safari thinks that this object should not be loaded.

Related questions

Retrieve the position (X,Y) of an HTML element relative to the browser window

I want to know how to get the X and Y position of HTML elements such as img and div in JavaScript relative to the browser window.

Read More
Set cookie and get cookie with JavaScript

I'm trying to set a cookie depending on which CSS file I choose in my HTML. I have a form with a list of options, and different CSS files as values. When I choose a file, it should be saved …

Read More
Failed to load resource: the server responded with a status of 404 (Not Found)

I can't solve my link problem. Could you help on to this to link CSS and JS File? CSS: <link href="../Jquery/jquery.multiselect.css" rel="stylesheet"/> <link href="../Jquery/style.css" rel="stylesheet" /> <link …

Read More