Normally, when I put a photo on a website, the photo stays the same aspect ratio on both widescreen and normal monitors.

But I have one web page where I need to resize the photos to all be the same width. I used the CSS width attribute, with an inch value.

When using the 4:3 monitor, the photos display normally.

When using the widescreen monitor on this page, the aspect ratio is wrongly changed so the image is shorter than it should be.

Is some special coding needed to preserve the aspect ratio?

Recommended Answers

All 3 Replies

That's a good question. Inch is a fixed value, so changing the screen resolution will change the value of an inch. Try using a dynamic unit, such as percentage or em.

Regards, Arkinder

The question was originally why putting a width style on a picture would cause it to change aspect ratio.

But I was fooled. Two supposedly identical computers were not identical. Someone changed the screen resolution on one of them to use legacy software, and didn't bother to change it back.

The page with the width attribute was displayed on the computer with the wrong resolution. Since someone was using that computer when it was displayed, I checked the other pages on the computer next to it, which was running the proper screen resolution. After I posted the question, I checked the page displaying the4 trouble on the second computer and found it to be showing normal aspect ratios. But I didn't have time to post then.

Changing the screen resolution fixed the problem.

Why don't they make monitors so they display 4:3 aspect ratios on only part of the 16:9 screen, so it is not stret6ched.

Ah, you said width with an inch value. Anyways that's rather annoying. I think that the purpose of changing a resolution originated for visibility rather than quality.

Regards, Arkinder

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.