I am wondering how to make sure that aspect ratio of an image stays the same for all visitors with different display settings. For example, if I define an image like

<img src="myimg.jpg" width=30px height=60px>

and one visitor uses resolution 800x600 and another uses 1280x800, then, since 800:600 = 1.33 < 1.6 = 1280:800, this means one of the visitors is going to see the image stretched, is that right? To be sure, there should be no aspect ratio change across the three most common resolutions 640X480,800x600,1024x748 because they all have the same ratio of 1.33, but what about the other modes such as 720x480, 848x480, 960x600, 1152x864, 1280x720, 1280x768, 1280x800, 1280x960, 1280x1024, and so on? Is there any common workaround to fix the aspect ratio of the image in the browser regardless of the user's display settings?

No matter what - if a picture is thirty pixels wide, it will be thirty pixels wide on all screens, so it will not stretch. Now it may happen that the pixels are bigger on a different screen therefore rendering your image too look bigger, but in the end it's the same size.

Now I'm pretty sure there's a way to make an image stretch depending on the user's resolution by using JavaScript. Someone posted about that on this forum once, though I don't know where that was. I'll defer to one of the JavaScript Junkies for that one.

- Steve

I am have no problem with the image being bigger or smaller, my problem is to make sure that its proportions don't get distorted.

Originally Posted by DownWithBugs

I am have no problem with the image being bigger or smaller, my problem is to make sure that its proportions don't get distorted.

Okay, don't worry about that, then. Your proportions won't get distorted.

- Steve

They did, as soon I changed resolution. It makes sense too: if one pixel that occupied 1/1024 of the screen width is now occupiying 1/1280 of screen width, while along the vertical the number of pixels per screen does not change that much, that turns every single pixel from a square into a rectangle, so it's only natural that the same number of pixels would give me an elongated image.

Originally Posted by stevej

Now it may happen that the pixels are bigger on a different screen therefore rendering your image too look bigger, but in the end it's the same size.

Like I said, the only difference between different resolutions is that it will look bigger. Or a different size, for that matter. It's still 30px wide.

- Steve

Nobody doubts the fact that it's still 30px wide. But that wasn't my question. My question was what to do with that 30px image that is now contorted beyond recognition because the user had set his display to have narrow pixels. That is unacceptable when presenting artwork. There are hundreds of thousands of sites that are image-intensive and that have correct image proportions at all display resolutions, so the question that I'm asking is really a trivial question that every web designer must know the answer to.

Did you set the DIMENSIONS on the image in your html ??? If not, then you MUST do so, to leave it out is to let the BROWSER determine the dimensions - and that you do NOT want.

I tried both - letting the browser figure the dimensions on its own and specifying the width and height in pixels explicitly as in <img src="myfile.jpg" width=30 height=45>. Either way, the browser's reaction was exactly the same: whenever I changed display resolution from 1024x768 (1024:768=1.33) to X x Y where X:Y > 1.33, it would show elongated images. The problem was common to both IE and Firefox.

I did some googling to confirm that it's a known problem. And sure enough, the internet is full of advises to users to adjust their display properties to stick to 4:3 aspect ratio:

"For instance a 640 X 480 graphic will stretch proportionally and fill a screen with a resolution of 800 X 600 or 1024 x 768 and not be distorted although it will definitely be distorted on a widescreen with a resolution of 1440 x 900 or 1680 x 1050. That is because 640 x 480, 800 X 600 and 1024 x 768 are all ratios of 4:3.
Wide screen formats are a ratio of 8:5"

"If you have a regular old monitor (shaped like your old TV, not your new wide screen HDTV) try to stick to the 4:3 aspect ratio resolutions: 320X240, 640X480, 1024X768, 1152X864, 1280X960, 1400X1050, 1600X1200 and 2048X1536. It will help keep images from getting stretched out."

To summarize, I didn't make up this problem. All websites containing images provide a version for the users with a non-4:3 aspect ratio, hence my question about the preferred workaround. Of course one can always make separate versions of each .jpg file (one for 4:3, another for 5:4, etc.), but I am sure that this solution will be looked down upon by professionals for at least two reasons: a) it doubles the work load of the guy who is making images for your site, and b) if someone produces a notebook with a still another aspect ratio, you're back to the drawing board again. Obviously, a professional programmer will make his images adjust their dimensions dynamically according to the user's aspect ratio, hence my question: what is the technique that's typically employed in image-intensive websites? I am 100% sure that the answer is well-known to anyone who ever designed a professional website for a company, otherwise commercial sites would lose half of the visitor traffic.

Proportions don't get distorted, so don't worry about that .

"Proportions don't get distorted, so don't worry about that ."

Yes, they do. Look up the square at this link. Then change your resolution from 1024x768 to 1280x800, refresh the page and watch the squares turn into rectangles.

http://images.google.com/images?rlz=...num=1&ct=title

As far as I understand it, it's not the number of pixels that change, but the physical size of the pixels.
A pixel in a 16/9 matrix will always be physically wider than a pixel in a 4/3 matrix.
And as a pixel, is the smallest possible unit a screen can display, there is nothing to change that.

So yes, for the end user, the visual proportions will change.

Of course it is the physical size of pixels. The question is, what can a web programmer do to preserve the orgiginal proportions. The end user doesn't care how many pixels there are in the image. I tried to increase image width in proportion to the user's aspect ratio, but this solution does not seem to be very effective because screen resolution / aspect ratio doesn't tell you how tall or wide (in inches) the actual screen is, so in the final analysis you still don't know the actual physical dimensions of the pixel.

Originally Posted by DownWithBugs

I am wondering how to make sure that aspect ratio of an image stays the same for all visitors with different display settings. For example, if I define an image like

<img src="myimg.jpg" width=30px height=60px>

and one visitor uses resolution 800x600 and another uses 1280x800, then, since 800:600 = 1.33 < 1.6 = 1280:800, this means one of the visitors is going to see the image stretched, is that right? To be sure, there should be no aspect ratio change across the three most common resolutions 640X480,800x600,1024x748 because they all have the same ratio of 1.33, but what about the other modes such as 720x480, 848x480, 960x600, 1152x864, 1280x720, 1280x768, 1280x800, 1280x960, 1280x1024, and so on? Is there any common workaround to fix the aspect ratio of the image in the browser regardless of the user's display settings?

The *Best* way to solve this problem is to create your images to view correctly on the lowest possible resolution. Ex: For computer screens, and larger (like tv monitors) I think 640 x 480 will suffice, but for portable screens such as the iPod touch use 320 x 240. This will allow the image to display correctly on the lower resolution screen while at the same time display correctly on large screens without losing quality (from distortion etc.)

So, in summary, design in the lowest possible resolution you can so you will not run into problems with higher resolution displays. This goes for anything. Image or websites in general.

Hth

Why do you think that an image created with low resolution should scale better? If the size of user's pixels is unknown, then it's all guesswork, where your guess is as good as mine. Now, is there any command in JavaScript or whatever that would report the physical size of the screen in inches? This, together with screen.width and screen.height parameters, would give me all the information that I need.

Why inches? Unless your talking about printing images onto paper. Otherwise pixels is the way to go for screen dimensions.

Suppose the user's pixels are 0.2mm x 0.2mm. Then <img src="square.gif" width=50 height=50> will display as a square. Suppose now that the user's pixels are 0.2mm x 0.1 mm. Then to display the same square with correct proportions, I will need <img width="square.gif" width=50 height=100>. The screen.width property will only tell me that the pixel's width is 1/1024 of the screen width, and ditto for screen.height. If I can also find out that the screen is 15'' long and 10'' tall, then I will know the exact size of pixels. Otherwise, I see no way to ensure correct proportions. See also the post by tripy - this poster undestood my question correctly.

Originally Posted by DownWithBugs

Suppose the user's pixels are 0.2mm x 0.2mm. Then <img src="square.gif" width=50 height=50> will display as a square. Suppose now that the user's pixels are 0.2mm x 0.1 mm. Then to display the same square with correct proportions, I will need <img width="square.gif" width=50 height=100>. The screen.width property will only tell me that the pixel's width is 1/1024 of the screen width, and ditto for screen.height. If I can also find out that the screen is 15'' long and 10'' tall, then I will know the exact size of pixels. Otherwise, I see no way to ensure correct proportions. See also the post by tripy - this poster undestood my question correctly.

Correct me if I am wrong -- 0.2mm x 0.2mm is totally different as far as units of measure are concerned vs pixels.

http://www.unitconversion.org/typography/pixels-x-to-millimeters-conversion.html

Hth

Of course. When they tell you to rely on pixels whose size is unknown in advance, don't be surprized if what your Photoshop thought to be an ideal circle will display as an oval on some other computer.