02-21-2005, 11:07 PM
I have a page which I apply the CSS max-width property to a IMG element. Safari obeys the command, but unlike other browsers, does not scale the image. Instead, in safari you see a "squashed" version of the image.
Does anyone know of a solution to this?
<img src="http://www.google.com/images/logo.gif" style="max-width: 50px;" />
02-22-2005, 03:35 AM
Well, the normal usage for max-width is to control the scalability of an element, for example keep a div from expanding past a certain limit when the browser window is maxed. <img> by itself isn't really "scaleable" (well, I guess it is if the height/width isn't explicitly set, but doesn't scale on its own as an element). Do you have a link to the page in question? I'd like to take a look and see if I can figure something out...
02-22-2005, 03:56 AM
The images on the home page of the products are max-width: set to something like 430px. This works fine in Firefox, and alright once I add the JS hack for IE. No problems - both scale the whole image. Went to school, pop open safari and instead of scaling the image down (if needed), it simply squishes it.
(Full size images are available if you just click through.)
Thanks for taking a peek.
02-22-2005, 04:03 AM
Okay, I took a look and I don't think max-width is needed. The images stay at 430px the whole time, no matter the size of the browser window, and the page width is fixed and centered, too...
Personally I'd either set an implicit width in the CSS or in the image tag, unless there's a situation where the images are less than 430px?
02-22-2005, 04:21 AM
Yes they stay that size on the home page, but on other pages they are allowed to be a little bit bigger. Additionally, the images are going to be different dimensions (the client will be able to add new images)
All this means: there is a maximum image width of 430 on the home page, but a larger size on the single product and category pages. Thus it is the simplest method to use the same image, but have the CSS code make sure that the images don't exceed their bounds.
Using 'width: 430px' would work fine if I could guarantee every image would be larger than 430px, but some may be thinner, in which case they'd be getting streched out too large - which would look really poor. This is why "max-width" is such a great solution.
02-22-2005, 04:53 AM
hmmm... how about nesting the images in a block element, setting the width on that element, and leaving the image at width: auto?