Images displayed at the wrong ratio in Safari

HTML & CSS
1

Hello,

I’m currently finishing up my personal website and when it came to testing noticed that my images were displayed at the wrong ratio in Safari but correctly in all browsers (except IE which I’ve been unable to get to open let alone test on).

I’m using Dreamweaver.

The images are set with h=50% and w=50%

<p><img src="Images/2.jpg" width="50%" height="50%" alt="Oil Object #2" /></p>

Here is how they display:

Chrome

Safari

Any help would be greatly appreciated.
Let me know if you need more code/details.

Thank you.

2

I would guess the problem is using % for the image size. Apart from anything else it seems a bad way to do it. What happens if somebody uploads a large image and somebody else uploads a small one. The page layout will break; it is better to use fixed sizes. If you insist on using percents try using getimagesize() and do some calculations for the actual size in the image tags.

3

Thanks for the reply. The reason I was using it was it scaled with the browser. I’ll be the only person adding to the site so I figured it wouldn’t be a problem. What would be the best way of getting the images to scale to the browser window? All my images are different sizes but when I use % they all scale down to 50% of the window so they all match.

I have very little knowledge of coding, would you mind explaining what you mean by getimagesize()?

Thank you.