Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Feb 2005
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy Image max-width in Safari

    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?

    Example:

    Code:
    <img src="http://www.google.com/images/logo.gif" style="max-width: 50px;" />
    Last edited by chuyskywalker; 02-22-2005 at 12:20 AM.

  • #2
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    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...

  • #3
    New to the CF scene
    Join Date
    Feb 2005
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Sure thing:

    http://www.eastwestbest.net/dev/

    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.

  • #4
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    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?

  • #5
    New to the CF scene
    Join Date
    Feb 2005
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Post

    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.

  • #6
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    hmmm... how about nesting the images in a block element, setting the width on that element, and leaving the image at width: auto?


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •