473,239 Members | 1,706 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,239 software developers and data experts.

How to limit an image size to AxB?

I need to display pictures, but only as large as AxB. If it is smaller than
AxB, then I will display it in the original size, if it is larger than AxB,
I will resize it.

However, if the size is 100x200, but I limited it to 50x60, then if I use
height x width, the image does not display well. So, I want it to srink is a
ratio of the original size, so it is will be from 100x200 to 30x60.

How can I do it if it is hosted on my server, -- Any server side image
program to change sizes?

How can I do it if it is hosted remoted, and I only use the src hot link, --
so I must find a way to do it in Javascript to resize it.
Jul 23 '05 #1
20 2616
http://links.i6networks.com wrote:

You are a fucking nuiscance.

--
Charles Sweeney
http://CharlesSweeney.com
Jul 23 '05 #2


Charles Sweeney wrote:

http://links.i6networks.com wrote:

You are a fucking nuiscance.

how did you determine that sweeney ?. (:P)
--
Charles Sweeney
http://CharlesSweeney.com


--
X-No-Archive: Yes
Jul 23 '05 #3
http://links.i6networks.com wrote on 16 aug 2004 in
comp.lang.javascript:
I need to display pictures, but only as large as AxB. If it is smaller
than AxB, then I will display it in the original size, if it is larger
than AxB, I will resize it.

However, if the size is 100x200, but I limited it to 50x60, then if I
use height x width, the image does not display well. So, I want it to
srink is a ratio of the original size, so it is will be from 100x200
to 30x60.

How can I do it if it is hosted on my server, -- Any server side image
program to change sizes?
Depends on your serverside platform, under ASP you would need a com
object I suppose. OT here.
How can I do it if it is hosted remoted, and I only use the src hot
link, -- so I must find a way to do it in Javascript to resize it.


Only IE tested:

<img id="pp" src="my.gif">

<script>
p = document.getElementById("pp")
w = p.clientWidth
h = p.clientHeight
// max 50x60
if (w>50||h>60){
if (w/h>50/60){
p.style.width='50px'
alert("width corrected, relative aspect kept")
} else {
p.style.height='60px'
alert("height corrected, relative aspect kept")
}
} else {
alert("no correction, is small enough")
}
</script>
--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)
Jul 23 '05 #4
atec wrote:


Charles Sweeney wrote:

http://links.i6networks.com wrote:

You are a fucking nuiscance.

how did you determine that sweeney ?. (:P)


Strangely enough Mary, in much the same way you are.

--
Charles Sweeney
http://CharlesSweeney.com
Jul 23 '05 #5


Charles Sweeney wrote:

atec wrote:


Charles Sweeney wrote:

http://links.i6networks.com wrote:

You are a fucking nuiscance.

how did you determine that sweeney ?. (:P)


Strangely enough Mary, in much the same way you are.

Marty , me ?.
whoosh sweeny , whoosh
--
Charles Sweeney
http://CharlesSweeney.com


--
X-No-Archive: Yes
Jul 23 '05 #6
atec wrote:


Charles Sweeney wrote:

atec wrote:
>
>
> Charles Sweeney wrote:
>>
>> http://links.i6networks.com wrote:
>>
>> You are a fucking nuiscance.
>
>
> how did you determine that sweeney ?. (:P)


Strangely enough Mary, in much the same way you are.

Marty , me ?.
whoosh sweeny , whoosh


Good girl.

--
Charles Sweeney
http://CharlesSweeney.com
Jul 23 '05 #7


Charles Sweeney wrote:

atec wrote:


Charles Sweeney wrote:

atec wrote:

>
>
> Charles Sweeney wrote:
>>
>> http://links.i6networks.com wrote:
>>
>> You are a fucking nuiscance.
>
>
> how did you determine that sweeney ?. (:P)

Strangely enough Mary, in much the same way you are. Marty , me ?.
whoosh sweeny , whoosh


Good girl.

aha , you pat your self eh ?. now remind us what that's called .
--
Charles Sweeney
http://CharlesSweeney.com


--
X-No-Archive: Yes
Jul 23 '05 #8
http://links.i6networks.com wrote:
I need to display pictures, but only as large as AxB. If it is smaller
than AxB, then I will display it in the original size, if it is larger
than AxB, I will resize it.


Read http://www.catb.org/~esr/faqs/smart-questions.html
before asking innane quesions.

gtoomey
Jul 23 '05 #9
[Follow-ups set to alt.flame]

On Mon, 16 Aug 2004 atec <"atec77(notspam)"@hotmail.com> and Charles
Sweeney <me@charlessweeney.com> were both jackasses:

[snipped rubbish]

Will you please take this a more appropriate group or e-mail.

Mike

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail
Jul 23 '05 #10
Michael Winter wrote:
[Follow-ups set to alt.flame]

On Mon, 16 Aug 2004 atec <"atec77(notspam)"@hotmail.com> and Charles
Sweeney <me@charlessweeney.com> were both jackasses:

[snipped rubbish]

Will you please take this a more appropriate group or e-mail.

Mike


I didn't realise this was going to comp.lang.javascript

If you were regular in AWW you would know that there are certain issues
between me and the "atec" character.

Therefore my initial feeling that you are a total wanker, is slightly
off.

--
Charles Sweeney
http://CharlesSweeney.com
Jul 23 '05 #11


Charles Sweeney wrote:

Michael Winter wrote:
[Follow-ups set to alt.flame]

On Mon, 16 Aug 2004 atec <"atec77(notspam)"@hotmail.com> and Charles
Sweeney <me@charlessweeney.com> were both jackasses:

[snipped rubbish]

Will you please take this a more appropriate group or e-mail.

Mike
I didn't realise this was going to comp.lang.javascript

If you were regular in AWW you would know that there are certain issues
between me and the "atec" character.

Therefore my initial feeling that you are a total wanker, is slightly
off.

no issues his end sweeny
--
Charles Sweeney
http://CharlesSweeney.com


--
X-No-Archive: Yes
Jul 23 '05 #12
Extremely smart. Thanks.
http://links.i6networks.com wrote on 16 aug 2004 in
comp.lang.javascript:
I need to display pictures, but only as large as AxB. If it is smaller
than AxB, then I will display it in the original size, if it is larger
than AxB, I will resize it.

However, if the size is 100x200, but I limited it to 50x60, then if I
use height x width, the image does not display well. So, I want it to
srink is a ratio of the original size, so it is will be from 100x200
to 30x60.

How can I do it if it is hosted on my server, -- Any server side image
program to change sizes?


Depends on your serverside platform, under ASP you would need a com
object I suppose. OT here.
How can I do it if it is hosted remoted, and I only use the src hot
link, -- so I must find a way to do it in Javascript to resize it.


Only IE tested:

<img id="pp" src="my.gif">

<script>
p = document.getElementById("pp")
w = p.clientWidth
h = p.clientHeight
// max 50x60
if (w>50||h>60){
if (w/h>50/60){
p.style.width='50px'
alert("width corrected, relative aspect kept")
} else {
p.style.height='60px'
alert("height corrected, relative aspect kept")
}
} else {
alert("no correction, is small enough")
}
</script>
--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

Jul 23 '05 #13
On 16 Aug 2004 09:28:25 GMT, "Evertjan."
<ex**************@interxnl.net> wrote:
http://links.i6networks.com wrote on 16 aug 2004 in
comp.lang.javascript:
I need to display pictures, but only as large as AxB. If it is smaller
than AxB, then I will display it in the original size, if it is larger
than AxB, I will resize it.

However, if the size is 100x200, but I limited it to 50x60, then if I
use height x width, the image does not display well. So, I want it to
srink is a ratio of the original size, so it is will be from 100x200
to 30x60.

How can I do it if it is hosted on my server, -- Any server side image
program to change sizes?


Depends on your serverside platform, under ASP you would need a com
object I suppose. OT here.
How can I do it if it is hosted remoted, and I only use the src hot
link, -- so I must find a way to do it in Javascript to resize it.


Only IE tested:

<img id="pp" src="my.gif">

<script>
p = document.getElementById("pp")
w = p.clientWidth
h = p.clientHeight
// max 50x60
if (w>50||h>60){
if (w/h>50/60){
p.style.width='50px'
alert("width corrected, relative aspect kept")
} else {
p.style.height='60px'
alert("height corrected, relative aspect kept")
}
} else {
alert("no correction, is small enough")
}
</script>

Image Elements have a "width" & "height" properties (according to the
book I'm reading, javascript: The Difinitive Guide)

Maybe using the getElementsByName() method might be of use.

<img name="thumbnail" src="pic1.gif>
<img name="thumbnail" src="pic2.gif>
<img name="thumbnail" src="pic3.gif>

<script>
var maxWidth=50, maxHeight=60;
var imgs = document.getElementsByName("thumbnail");
if (imgs.length >0) {
for (var i = 0; i < imgs.length; i++) {
if (imgs[i].width > maxWidth || img[i].height > maxHeight) {
imgs[i].width = maxWidth;
imgs[i].height = maxHeight;
}
}
}
</script>
(note untested code) and that I'm no expert so don't even know if the
above will work :P

HTH

Al.
Jul 23 '05 #14
Harag wrote on 16 aug 2004 in comp.lang.javascript:
if (imgs[i].width > maxWidth || img[i].height > maxHeight) {
imgs[i].width = maxWidth;
imgs[i].height = maxHeight;
}


This will deform the pictures !

Please review my code.

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)
Jul 23 '05 #15
"http://links.i6networks.com" <Sa***************@alexa.com> writes:
I need to display pictures, but only as large as AxB. If it is smaller than
AxB, then I will display it in the original size, if it is larger than AxB,
I will resize it.
The immediate method would be using the CSS properties max-width and
max-height. That is:

<img src="someImg.png" style="max-width:50px;max-height:60px;">

However, support is flakey. Opera and Mozilla doesn't agree on what to
do. Opera preserves aspect, Mozilla doesn't (it's Opera's behavior
that is correct according to CSS 2.1), and IE doesn't understand a
word of it, as usual.

So, you'll need Javascript, which means that you are in the correct
group.

(Followup-To set to comp.lang.javascript. When you crosspost, *please*
remember to set Followup-To to the most appropriate group)
However, if the size is 100x200, but I limited it to 50x60, then if I use
height x width, the image does not display well. So, I want it to srink is a
ratio of the original size, so it is will be from 100x200 to 30x60.
Try this:
---
<script type="text/javascript">
function restrictImage(image, x, y) {
var w = image.width;
var h = image.height;
if (w > x) {
h = h * (x/w);
w = x;
}
if (h > y) {
v = v * (y/h);
h = y;
}
image.width = Math.floor(w);
image.height = Math.floor(h);
}
</script>
<img src="../../PicA.png" onload="restrictImage(this,40,70);">
---

It's tested in IE 5+, Mozilla FireFox and Opera 7.5. It doesn't work in
Netscape 4 or Opera 6 (since they don't allow reflowing of the page after
loading).
How can I do it if it is hosted on my server, -- Any server side image
program to change sizes?
That would probably be overkill if the images are fairly small. If
they are multi-megabyte images, then they *should* be reduced on the
server to prevent unnecessary transfer overhead. I don't know much
about server side programming, but I believe that some installations
of PHP has image manipulation functions installed.
How can I do it if it is hosted remoted, and I only use the src hot link, --
so I must find a way to do it in Javascript to resize it.


The above works to some extent. If you want it to work in browsers
like Netscape 4, you need to do some extra work ... or go for a server
side solution.

/L
--
Lasse Reichstein Nielsen - lr*@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'
Jul 23 '05 #16
http://links.i6networks.com wrote:
How can I do it if it is hosted on my server, -- Any server side image
program to change sizes?


Try ImageMagick or GD.

--
Toby A Inkster BSc (Hons) ARCS
Contact Me ~ http://tobyinkster.co.uk/contact

Jul 23 '05 #17
Evertjan. wrote:
http://links.i6networks.com wrote on 16 aug 2004 in
comp.lang.javascript:
I need to display pictures, but only as large as AxB. If it is smaller
than AxB, then I will display it in the original size, if it is larger
than AxB, I will resize it.

However, if the size is 100x200, but I limited it to 50x60, then if I
use height x width, the image does not display well. So, I want it to
srink is a ratio of the original size, so it is will be from 100x200
to 30x60.

How can I do it if it is hosted on my server, -- Any server side image
program to change sizes?


Depends on your serverside platform, under ASP you would need a com
object I suppose. OT here.


but not here (AWW) - AspImage works well for this purpose.

--
William Tasso
Recommended reading ...
http://www.catb.org/~esr/faqs/smart-questions.html
http://www.aww-faq.org/
Jul 23 '05 #18
On 16 Aug 2004 16:34:25 GMT, "Evertjan."
<ex**************@interxnl.net> wrote:
Harag wrote on 16 aug 2004 in comp.lang.javascript:
if (imgs[i].width > maxWidth || img[i].height > maxHeight) {
imgs[i].width = maxWidth;
imgs[i].height = maxHeight;
}

This will deform the pictures !


Correct. The main point of my message was to say that images have a
width & height property.

I've just done some tests and netscape 7.1 doesn't have clientWidth &
clientHeight on images so .width & .height will need to be used, and
the "scaling" code will need to be worked out another way. as NS
didn't scale both properties.

Yes, I know your code works great in IE. It will depend on if the OP
wants it to work in NS7.1 or just IE.

Please review my code.


I did do thanks :)

Al.

Jul 23 '05 #19
On 16 Aug 2004 16:34:25 GMT, "Evertjan."
<ex**************@interxnl.net> wrote:
Harag wrote on 16 aug 2004 in comp.lang.javascript:
if (imgs[i].width > maxWidth || img[i].height > maxHeight) {
imgs[i].width = maxWidth;
imgs[i].height = maxHeight;
}


This will deform the pictures !

Please review my code.

revised code:

<br><img name="thumbnail" src="mypic1.gif" width="200" height="100">
<br><img name="thumbnail" src="mypic2.gif" width="200" height="100">
<br><img name="thumbnail" src="mypic3.gif" width="200" height="100">

<script type="text/javascript">

var maxWidth=50, maxHeight=60;
var imgs = document.getElementsByName("thumbnail");
if (imgs.length >0) {
for (var i = 0; i < imgs.length; i++) {
w = imgs[i].width;
h = imgs[i].height;
if (w > maxWidth || h > maxHeight) {
if (w > maxWidth) {
h = h * (maxWidth/w);
w = maxWidth;
}
if (h > maxHeight) {
w = w * (y/maxHeight);
h = maxHeight;
}
imgs[i].width= w;
imgs[i].height = h;
}
}
}
</script>

Jul 23 '05 #20
Harag wrote on 17 aug 2004 in comp.lang.javascript:
revised code:

<br><img name="thumbnail" src="mypic1.gif" width="200" height="100">
<br><img name="thumbnail" src="mypic2.gif" width="200" height="100">
<br><img name="thumbnail" src="mypic3.gif" width="200" height="100">
This will not work, as w = imgs[i].width; will always be 200.

leave out the 3 'width="200" height="100"'

<script type="text/javascript">

var maxWidth=50, maxHeight=60;
var imgs = document.getElementsByName("thumbnail");
if (imgs.length >0) {
This 'if ...' is superfluous,
as the 'var i = 0;i < imgs.length' will take care of it.
for (var i = 0; i < imgs.length; i++) {
w = imgs[i].width;
h = imgs[i].height;
if (w > maxWidth || h > maxHeight) {
if (w > maxWidth) {
h = h * (maxWidth/w);
Why would you want to specify the height here as the browser will do this
itself from the width correction? (*)
[IE certainly, others probably: otherwise delete the //s below]
w = maxWidth;
}
if (h > maxHeight) {
If both h and w are oversize, this second condition will overwrite the
first, resulting sometimes in a w that is far larger than maxWidth.
You really need this 'if (w/h > maxWidth/maxHeight) ...'

w = w * (y/maxHeight);
Same objection as in (*), but reversed.
h = maxHeight;
}
imgs[i].width= w;
imgs[i].height = h;
}
}
}
</script>


===============

So I would suggest this:

<br><img name="thumbnail" src="my1.gif">
<br><img name="thumbnail" src="my2.gif">
<br><img name="thumbnail" src="my3.gif">

<script type="text/javascript">

var maxWidth=50, maxHeight=60;

var imgs = document.getElementsByName("thumbnail");
for (var i = 0; i < imgs.length; i++) {
w = imgs[i].width;
h = imgs[i].height;
if (w > maxWidth || h > maxHeight) {
if (w/h > maxWidth/maxHeight) {
imgs[i].width = maxWidth;
// imgs[i].height = h * (maxWidth/w);
// perhaps necessary in some nonIE browsers?
} else {
imgs[i].height = maxHeight;
// imgs[i].width = h * (maxHeight/w);
// perhaps necessary in some nonIE browsers?
}
}
}

</script>

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)
Jul 23 '05 #21

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

Similar topics

8
by: Randell D. | last post by:
Folks, Sorry for the cross post into multiple newsgroups on this, but html forms processing is supported across all three groups so I was hoping someone might know. I did a check with Google...
2
by: steve | last post by:
I am setting up a huge database in mysql, and I get the above error in Linux. I believe it is related to the size of one of my tables, which is 4,294,966,772 bytes in size. Can someone help. How...
13
by: Sharon | last post by:
I'm using TcpClient and getting the Stream by: TcpClient tcpclnt = new TcpClient(); . . . Stream stm = tcpclnt.GetStream(); Now, when I'm trying to send a big buffer via stm.Write(...) I get an...
2
by: Jim McGivney | last post by:
On an aspx page I use the following code to display an image: //Display the graphic string imgee = this.Request.QueryString.ToString(); System.Web.UI.WebControls.Image myImage = new...
3
by: Jefferis NoSpamme | last post by:
Hello all, I'm trying to limit the file size to 1 meg on upload of image files and I am trying a script from javascript internet, but it is giving me errors on IE is null or not an object ...
5
by: Jefferis NoSpamme | last post by:
Hi all, I'm trying to limit the file size of an image submission and I keep running into various problems. I've got most of it working, but I'm stumped and I have a basic question as to WHY this...
5
by: Steve | last post by:
WSE352 Size of the record exceed its limit I have a C#.Net windows app that calls a FileNet web service. I can run a select against the web service and it returns up to 7,200 records with 5...
3
by: John Taylor | last post by:
Tried to find any reference to this on the Microsoft help pages but can't find any reference - maybe I'm just not smart enough to find it. However; I have been working on a membership database...
7
by: Peter Parker | last post by:
Could someone show me how to limit caption width to image width dynamically (image width is not known in advance) if that's possible? I was thinking of using Javascript to get the image width which...
3
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 3 Jan 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). For other local times, please check World Time Buddy In...
0
by: fareedcanada | last post by:
Hello I am trying to split number on their count. suppose i have 121314151617 (12cnt) then number should be split like 12,13,14,15,16,17 and if 11314151617 (11cnt) then should be split like...
0
Git
by: egorbl4 | last post by:
Скачал я git, хотел начать настройку, а там вылезло вот это Что это? Что мне с этим делать? ...
1
by: davi5007 | last post by:
Hi, Basically, I am trying to automate a field named TraceabilityNo into a web page from an access form. I've got the serial held in the variable strSearchString. How can I get this into the...
0
by: MeoLessi9 | last post by:
I have VirtualBox installed on Windows 11 and now I would like to install Kali on a virtual machine. However, on the official website, I see two options: "Installer images" and "Virtual machines"....
0
by: DolphinDB | last post by:
The formulas of 101 quantitative trading alphas used by WorldQuant were presented in the paper 101 Formulaic Alphas. However, some formulas are complex, leading to challenges in calculation. Take...
0
by: Aftab Ahmad | last post by:
Hello Experts! I have written a code in MS Access for a cmd called "WhatsApp Message" to open WhatsApp using that very code but the problem is that it gives a popup message everytime I clicked on...
0
by: Aftab Ahmad | last post by:
So, I have written a code for a cmd called "Send WhatsApp Message" to open and send WhatsApp messaage. The code is given below. Dim IE As Object Set IE =...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...

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.