fixed image size with javascript

[finecur]

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

 

[prac]

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.com/vision_grapillon.htm

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

hope this help you

 

[finecur]

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/vi...chappuis.googlepages.com/vision_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.

 

[prac]

max-width is for <div> and dont't work with IE under ie7

 

[VK]

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.

 

[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="" />

 

[finecur]

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