Image display issues
#1
Scooby Regular
Thread Starter
Join Date: Mar 1999
Location: The Great White North
Posts: 25,080
Likes: 0
Received 0 Likes
on
0 Posts
Image display issues
There is a thread in CR about images looking odd in Safari and not in Firefox on a Macintosh.
As an example, have a look at this thread in Safari and Firefox.
The image appears squashed/stretched in Safari. If you click on it, the full size is revealed (800 x 600) and it looks fine. In Firefox the image does not look squashed/stretched.
I think the problem is due to a style tag in the code used to display images, plus a browser being smart/dumb.
If we look at the html source for the aforementioned thread, the code for the first image is as follows:
The problematic bit is: style="max-width: 640px;" . It looks as though Safari is respecting this instruction and is setting the max width to 640 pixels, however, it's either being smart/dumb and it's leaving the height of the image alone, which in this case is 600 pixels, so you end up with an image whose original size is 800 x 600, being scaled to 640 x 600, so it looks odd.
Firefox seems to smart/dumb in that it is changing the width, as per the style code, but it's also adjusting the height to maintain the correct aspect ratio, so in this example, the height of the image is resized to 480 pixels.
One could argue that it's not an SN issue, but typically when setting a maximum for the size of an image you should ideally set width and height, so perhaps adding max-height: 480px; to the style tag might help as it would force a browser to correctly scale the picture.
As an example, have a look at this thread in Safari and Firefox.
The image appears squashed/stretched in Safari. If you click on it, the full size is revealed (800 x 600) and it looks fine. In Firefox the image does not look squashed/stretched.
I think the problem is due to a style tag in the code used to display images, plus a browser being smart/dumb.
If we look at the html source for the aforementioned thread, the code for the first image is as follows:
Code:
<a href="http://i108.photobucket.com/albums/n22/RobVXD/m_001.jpg" target="_blank"><img src="http://i108.photobucket.com/albums/n22/RobVXD/m_001.jpg" border="0" alt="" style="max-width: 640px;" /></a><br />
Firefox seems to smart/dumb in that it is changing the width, as per the style code, but it's also adjusting the height to maintain the correct aspect ratio, so in this example, the height of the image is resized to 480 pixels.
One could argue that it's not an SN issue, but typically when setting a maximum for the size of an image you should ideally set width and height, so perhaps adding max-height: 480px; to the style tag might help as it would force a browser to correctly scale the picture.
#4
Scooby Regular
iTrader: (5)
Join Date: Jan 2004
Location: Bedfordshire
Posts: 8,948
Likes: 0
Received 0 Likes
on
0 Posts
Can something be done about this please.
a new example
http://i18.photobucket.com/albums/b1...-/Picture1.png
a new example
http://i18.photobucket.com/albums/b1...-/Picture1.png
Thread
Thread Starter
Forum
Replies
Last Post
hardcoreimpreza
Computer & Technology Related
21
11 October 2015 03:40 PM