Take the 2-minute tour ×

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.

share|improve this question

2 Answers 2

up vote 1 down vote accepted

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.

share|improve this answer

put the image in a container and check for scroll, if there is a scroll -> resize else do nothing or reduce the size of the container to the image size(depending on your flow needs)

<div class="imgCont" style="width:500px;height:500px;overflow:hidden">
<img src="some.jpg" /> 

example for checking for vertical scroll(using jQuery):

var el = $(".imgCont"),
    hasVerticalScroll = el.get(0).scrollHeight > el.innerHeight();
share|improve this answer

Your Answer


