HTML + Javascript: Dynamic Image Resize?

Question

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:

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;
	}
}

<img id="myimage" onload="resize_image(self.id);" src="https://via.placeholder.com/350x150" width="800" />

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.

bezmax · Accepted Answer · 2008-12-16 14:56:30Z

3

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.

answered Dec 16, 2008 at 14:56

bezmax

26.3k11 gold badges55 silver badges84 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

sertsedat · Accepted Answer · 2018-09-14 08:05:59Z

2

Use the IE6 css+javascript hack:

.dynamic_img {
    width: expression(document.body.clientWidth <= 800? "auto" : "800px");
    max-width: 800px; //For normal browsers
}

edited Sep 14, 2018 at 8:05

sertsedat

3,6101 gold badge28 silver badges45 bronze badges

answered Dec 16, 2008 at 14:37

bezmax

26.3k11 gold badges55 silver badges84 bronze badges

2 Comments

sblundy Over a year ago

This has a performance cost, so you can't have a bunch of them on the page.

bezmax Over a year ago

Hm, I've just tested it and guess what, that expression is evaluated on any possible event. And I was naive to think it evaluates only once...

mroztn · Accepted Answer · 2010-03-04 15:23:34Z

1

Without id:

...
  function resize_image( img )
  {
     //var img = document.getElementById( id );
...
  <img onload="resize_image(this);" src="IMAGE.JPG" width="800" />

answered Mar 4, 2010 at 15:23

mroztn

953 bronze badges

Comments

sblundy · Accepted Answer · 2008-12-16 14:38:34Z

0

Have you tried monkey with img.style.width? You could also try having 2 CSS classes for each of the 2 conditions and programmaticly change them.

answered Dec 16, 2008 at 14:38

sblundy

61.5k22 gold badges124 silver badges125 bronze badges

Collectives™ on Stack Overflow

HTML + Javascript: Dynamic Image Resize?

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related