image resizing

[barber.brad]

We are code crushing the width of images from 285px to 260 pix.
However we aren't changing the height. we need a bit of javascript
that can make that percentage change to the height as well. Can anyone
please help?

 

[bulldog8]

We are code crushing the width of images from 285px to 260 pix.
However we aren't changing the height. we need a bit of javascript
that can make that percentage change to the height as well. Can anyone
please help?

I am using this to display pictures, where the original picture height
and width are known:

var imgP = new Image();
function emit(ShowThis, wdth, hght) {
imgP.src = "../pics/' + ShowThis + '"
xw = 500;
yh = 500*(hght/wdth);

window.document.getElementById("graphic").innerHTML = '<img src="../
pics/' + ShowThis + '" width="' + xw + '" height="' + yh +
'"border="0">';

}

hope that helps ....

- Jon

 

[Richard Formby]

I am using this to display pictures, where the original picture height
and width are known:

var imgP = new Image();
function emit(ShowThis, wdth, hght) {
imgP.src = "../pics/' + ShowThis + '"
xw = 500;
yh = 500*(hght/wdth);

window.document.getElementById("graphic").innerHTML = '<img src="../
pics/' + ShowThis + '" width="' + xw + '" height="' + yh +
'"border="0">';

}

Why jump through all these hoops?

<img ... width="260>

Leave the height out and the browser automatically adjusts the height to
keep the aspect ratio the same.

 

[bulldog8]

Why jump through all these hoops?

<img ... width="260>

Leave the height out and the browser automatically adjusts the height to
keep the aspect ratio the same.

Ohhh simplicity! I LIKE it much better that a lot of code!

 

[ASM]

(e-mail address removed) a écrit :

We are code crushing the width of images from 285px to 260 pix.
However we aren't changing the height. we need a bit of javascript
that can make that percentage change to the height as well. Can anyone
please help?

You absolutely do not need to know the height of new display
the browser will automatically resize the image proportionally

<img name="test" src="01.jpg" alt="">
<a href="#" onclick="document.images['test'].width = 200;
return false;">proportionnally resize image to 200px width</a>


However if width AND height of image have been set ...

<img name="test" src="01.jpg" alt="" width=400 height=350>
<a href="#"
onclick="var I = document.images['test'];
var prop = I.height/I.width;
I.width = 200;
I.height = 200*prop;
return false;">
proportionnally resize image to 200px width</a>

 

[Richard Formby]

(e-mail address removed) a écrit :

However if width AND height of image have been set ...

<img name="test" src="01.jpg" alt="" width=400 height=350>
<a href="#"
onclick="var I = document.images['test'];
var prop = I.height/I.width;
I.width = 200;
I.height = 200*prop;
return false;">
proportionnally resize image to 200px width</a>

Stephane, the KISS principle applies again. Let the browser do the work (not
that I agree with the following code but...):

<img name="test" src="pictures/logoboot.jpg" alt="" width=400 height=350>
<a href="#"
onclick="var I = document.images['test'];
I.width = 200;
I.removeAttribute('height'); // <---
return false;">
proportionnally resize image to 200px width</a>

Then again, don't make the brower resize images anyway, it does a lousy job.
Do it up at the server, or better yet, where you are authoring.

 

[ASM]

Richard Formby a écrit :

Let the browser do the work (not
that I agree with the following code but...):

I.removeAttribute('height'); // <---

clever !

Then again, don't make the brower resize images anyway, it does a lousy job.

not so much, not so much.

It is only disastrous if user in RTC (tel modem) has to download a BIG
and HEAVY image just to see it in little size.

Do it up at the server, or better yet, where you are authoring.

Right.