Question

I just started to create a image viewer as a project but I was stuck at this point.

I used <img src="some.jpg" width="500" height="500" />.
The problem with this is, it works good if the image width is nearer to 500 or greater than 500 but
what if the image size is somwhere at 200 or 100 or 300?

It expands the image that has 200 width size to 500, this makes my images look so bad and this is not what I wanted. I just want the images that are greater than 500 to cut down to 500 and images like 200 or 300 width size should be same as 200 or 300.

If I use <img src="some.jpg" /> it takes the default image size.

jQuery solution is also much appreciated. I can find lots of jQuery image viewer plugins on the net but I want to make my own.

Answer 1

You could try the CSS style “max-width” on the image.

<img src="some.jpg" style="max-width:500px"/>.

I put the CSS inline only for demonstration purposes.