By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
464,420 Members | 1,219 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 464,420 IT Pros & Developers. It's quick & easy.

fixed image size with javascript

P: n/a
I have a <img scr="mypic.jpg"in my html. I would like to display the
image by width=200 if the image width is larger than 200. I also would
like to display the image by its real width if the image width is
smaller than 200. How can I do it?

Thanks,

qq

Feb 12 '07 #1
Share this Question
Share on Google+
7 Replies

P: n/a
Hello finecur

The problem is not simple. img width or height is always resized by
the real img !!

WHat I found, is to load the pic, not to display it, asking the real
width and height, if widht or height is greater then the max, changing
accordingly (keeping the rate w/h of the pic).

and only after I display it.

I do that in my viewers :

http://winepic01.googlepages.com/vision_winepic01.htm
http://winepic02.googlepages.com/vision_winepic02.htm
http://philippe.chappuis.googlepages..._grapillon.htm

(some are long to load, more then 100 pic)

hope this help you

---
http://philippe.chappuis.googlepages.com
---
Feb 12 '07 #2

P: n/a
On Feb 12, 11:51 am, "prac" <philippe.chapp...@gmail.comwrote:
Hellofinecur

The problem is not simple. img width or height is always resized by
the real img !!

WHat I found, is to load the pic, not to display it, asking the real
width and height, if widht or height is greater then the max, changing
accordingly (keeping the rate w/h of the pic).

and only after I display it.

I do that in my viewers :

http://winepic01.googlepages.com/vis..._grapillon.htm

(some are long to load, more then 100 pic)

hope this help you

---http://philippe.chappuis.googlepages.com
---
Thanks, someone said I can use img{max-width:200px;}, any ideas? I
tried, it did not work. I may did something wrong.
Feb 12 '07 #3

P: n/a

max-width is for <divand dont't work with IE under ie7
Feb 12 '07 #4

P: n/a
VK
On Feb 12, 9:52 pm, "finecur" <fine...@yahoo.comwrote:
I have a <img scr="mypic.jpg"in my html. I would like to display the
image by width=200 if the image width is larger than 200. I also would
like to display the image by its real width if the image width is
smaller than 200. How can I do it?
Others may have a better opinion but AFAIK you can't.

What you can do is to define styles in your stylesheet like

img {
width: 200px;
height: auto;
}

img.realSize {
width: auto !important;
}

and then ensure that each image lesser than 200px in width will have
<img class="realSize" ...

This presumes server-side content preparation of course.

Feb 12 '07 #5

P: n/a
ASM
finecur a écrit :
I have a <img scr="mypic.jpg"in my html. I would like to display the
image by width=200 if the image width is larger than 200. I also would
like to display the image by its real width if the image width is
smaller than 200. How can I do it?
function doSize(what) {
what.style.width = what.width>200? '200px' : '';
}

<img onload="doSize(this);" src="01.jpg" alt="" />
<img onload="doSize(this);" src="02.jpg" alt="" />
<img onload="doSize(this);" src="03.jpg" alt="" />
--
Stephane Moriaux et son (moins) vieux Mac déjà dépassé
Feb 12 '07 #6

P: n/a
"finecur" <fi*****@yahoo.comwrote:
I have a <img scr="mypic.jpg"in my html. I would like to display the
image by width=200 if the image width is larger than 200. I also would
like to display the image by its real width if the image width is
smaller than 200. How can I do it?
Here's my code which limits the image size to 128 wide or high and
maintains aspect ratio. Feel free to use/modify/fix as desired.

You have to specify a small width and height in the img tag (otherwise
the image will appear briefly at the wrong size), but you have to
completely remove the width and height attributes to find the natural
size on IE as it doesn't have the naturalWidth/naturalHeight attributes.

<img src="..." onload="fixImage(this);" width="1" height="1">

....
function fixImage(image) {
image.removeAttribute('width');
image.removeAttribute('height');
var width = image.naturalWidth || image.width;
var height = image.naturalHeight || image.height;
if (height width) {
if (height 128) {
width = width * 128 / height;
height = 128;
};
} else {
if (width 128) {
height = height * 128 / width;
width = 128;
};
};
image.height = height;
image.width = width;
}

Feb 13 '07 #7

P: n/a
Thank you for your code. I find however, sometimes
"fixImage" is called, sometimes it is not. This really mess things
up.

On Feb 13, 4:22 am, Duncan Booth <duncan.bo...@invalid.invalidwrote:
"finecur" <fine...@yahoo.comwrote:
I have a <img scr="mypic.jpg"in my html. I would like to display the
image by width=200 if the image width is larger than 200. I also would
like to display the image by its real width if the image width is
smaller than 200. How can I do it?

Here's my code which limits the image size to 128 wide or high and
maintains aspect ratio. Feel free to use/modify/fix as desired.

You have to specify a small width and height in the img tag (otherwise
the image will appear briefly at the wrong size), but you have to
completely remove the width and height attributes to find the natural
size on IE as it doesn't have the naturalWidth/naturalHeight attributes.

<img src="..." onload="fixImage(this);" width="1" height="1">

...
function fixImage(image) {
image.removeAttribute('width');
image.removeAttribute('height');
var width = image.naturalWidth || image.width;
var height = image.naturalHeight || image.height;
if (height width) {
if (height 128) {
width = width * 128 / height;
height = 128;
};
} else {
if (width 128) {
height = height * 128 / width;
width = 128;
};
};
image.height = height;
image.width = width;

}- Hide quoted text -

- Show quoted text -

Feb 15 '07 #8

This discussion thread is closed

Replies have been disabled for this discussion.