I've never come up against this problem before.

I'm designing a website which has some circular images. No problem there, or so I thought... I have my screen res set to 1280 x 1024 and when viewed at that res, the circle is well, circular. I created the image in Photoshop and I know it's dead circular. Drop down to any other res, such as 1024 x 768, and the image is squashed and looks eliptical. Question is why? Any ideas.

For anyone who wants to try, here is a sample image.

That doesn't make any sense. Can we see the code ?

Hi Lady 'n' Red

There is no code as such, just a simple placement:
<img src="images/circle.gif">

I think it has something to do with pixel ratios. I'm no boffin, but this may shed some light on the problem:

Pixel ratios for given screen resolutions:
[width / length]

800 x 600 = 1.3
1024 x 768 = 1.3
1152 x 864 = 1.3
1280 x 1024 = 1.25


I tried it on 3 seperate computers and came up with the same result each time. It even astounded a graphic designer friend with over 20 years in the business.

Interesting, I never knew that !

Um ... the 1280x1024 screen is set up wrong then. You're able to make a square-ish screen seem wide, and vice versa, if you play with the display settings, you can use either type screen at either aspect ratio, and make it squish one dimension of the whole screen to adjust.

I'm going to step out on a limb and guess you're using a CRT monitor?

No, I'm using a brand new Iiyama LCD panel.

Try it yourself...

I suspect that the earlier screen resolutions were developed at a time when text was mainly used on a web page.

no guys its true.

It is because of the pixel ratio, as well.


Don't believe me?
Set your monitor to

1360 x 768

The circle will be distorted beyond belief.

then switch to

1280 x 1024

it will be less distorted, yet still a bit squashed.


-SS