473,395 Members | 2,436 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,395 software developers and data experts.

image resizing

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?

Mar 19 '07 #1
6 7040
On Mar 18, 9:58 pm, barber.b...@abc.net.au wrote:
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").innerHTM L = '<img src="../
pics/' + ShowThis + '" width="' + xw + '" height="' + yh +
'"border="0">';

}

hope that helps ....

- Jon

Mar 19 '07 #2
bu******@lycos.com wrote:
On Mar 18, 9:58 pm, barber.b...@abc.net.au wrote:
>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").innerHTM L = '<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.

--
Richard.
Mar 19 '07 #3
>
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.

--
Richard.- Hide quoted text -

- Show quoted text -
Ohhh simplicity! I LIKE it much better that a lot of code!

Mar 19 '07 #4
ASM
ba*********@abc.net.au 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>
--
Stephane Moriaux et son (moins) vieux Mac déjà dépassé
Stephane Moriaux and his (less) old Mac already out of date
Mar 19 '07 #5
ASM wrote:
ba*********@abc.net.au a écrit :
>We are code crushing the width of images from 285px to 260 pix.
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.

--
Richard.
Mar 19 '07 #6
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.
--
Stephane Moriaux et son (moins) vieux Mac déjà dépassé
Stephane Moriaux and his (less) old Mac already out of date
Mar 19 '07 #7

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

5
by: Jim | last post by:
I've heard that resizing images through PHP (either GD2 or ImageMagick) is a processor intensive exercise. I'm setting up a site where users will be uploading up to 10 images along with the details...
6
by: bissatch | last post by:
Hi, I have a collection of images stored in a DB. They are there for the purpose of a news system. When the user views the homepage it will diplay cropped versions of the news where the user...
3
by: Zahid Khan | last post by:
I need little help in my situation. I am reading a graphic file (jpg) from disk and then resizing it and save resized image. What happens, it gets blured, I want to retain same quality so that...
10
by: David W. Simmonds | last post by:
I have a DataList control that has an Image control in the ItemTemplate. I would like to resize the image that goes into that control. I have a series of jpg files that are full size, full...
8
by: berkshire | last post by:
Hi, Anyone know of a script out there that can resize images and not sacrifice image quality? I've been using phpthumb (http://phpthumb.sourceforge.net/) but when compared to an image resized...
9
by: tshad | last post by:
Is there a way to display images (imageButtons or linkbuttons for instance) as a max size (200px by 50px) and not have it stretch the image? What I want to be able to do is limit the real estate...
9
by: kombu67 | last post by:
I'm reading a series of images from a MS SQL table and saving them to directory. These are staff ID pictures from our security card app. Once I've extracted the ID photo from the security app to...
10
by: mishrarajesh44 | last post by:
hii all, I am facing a problem currently.. i have a script for image uploading and resizing.. the image uploading takes place properly for every size images.. but, the resizing works for...
11
by: shapper | last post by:
Hello, I am displaying an image on a few pages. The image size is 50 px height and 50 px width. In some pages I need the image to be 30x30 px in others 40x40 px and in others 50x50px. Can I...
14
anfetienne
by: anfetienne | last post by:
hi.....i have this script (below #1) that is linked to another php file SimpleImage.php (#2) im trying to get it to work on my uploaded images but it keeps coming up errors.....i haven't altered...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
0
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
0
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
0
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.