Max Width of Images in CSS

Discussion in 'CSS' started by Jordan Garn, Jan 7, 2009.

0
  1. #1
    I need to set a Max image width for a content Area of my website

    I tried

    #contentArea img{
    max-width: 400px;
    }

    but no luck.

    What can I do
     
    Jordan Garn, Jan 7, 2009 IP
  2. Colbyt

    Colbyt Notable Member

    Messages:
    3,224
    Likes Received:
    185
    Best Answers:
    0
    Trophy Points:
    210
    #2
    You can declare the width of the div in the normal fashion but then you have to make sure the image fits or control the size in the image tag.

    If there is a way to do what you are trying I am not aware of it. Of course if I was any farther from an expert, I would be asking the question. :)
     
    Colbyt, Jan 7, 2009 IP
  3. drhowarddrfine

    drhowarddrfine Peon

    Messages:
    5,428
    Likes Received:
    95
    Best Answers:
    7
    Trophy Points:
    0
    #3
    You need to declare the width, too, otherwise it defaults to the width of the image. So try adding 'width: 100%'
     
    drhowarddrfine, Jan 7, 2009 IP
  4. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #4
    Actually, declaring a width would BREAK what I think he's trying to do, which is only shrink it IF it's bigger. For example if the image is only 50px wide and you set width:100%; min-width:400px; it's going to show as 400px, not the 50 px of the original.

    The trick to doing what is being asked is that you MUST NOT declare a width or height in the image TAG using attributes. You declare them there, it breaks - though without seeing the MARKUP you are trying to apply that CSS to, the CSS is pretty much meaningless.

    I made a 200px 'test' image, then loaded it via this markup:

    <img src="test.jpg" style="max-width:50px;" alt="" /><br />
    <img src="test.jpg" style="max-width:100px;" alt="" /><br />
    <img src="test.jpg" style="max-width:150px;" alt="" /><br />
    <img src="test.jpg" style="max-width:500px;" alt="" />

    The first three shrunk to fit, the last one showed 200px wide - worked just fine in IE7, Opera, Firefox and Safari. Naturally this will NOT work in IE6 since there is no max-width in legacy IE, though you might be able to fix that using an expression.

    Or you could just say **** IE6 since it should be on it's way out the door - though what I would consider doing is putting a wrapping div around the image tag, set it to a fixed width equal to your desired max-width, then set it to overflow:auto; - graceful degredation. Modern users get the min-width, legacy users get scrollbars.
     
    deathshadow, Jan 8, 2009 IP
    tarponkeith likes this.
  5. tarponkeith

    tarponkeith Well-Known Member

    Messages:
    4,758
    Likes Received:
    279
    Best Answers:
    0
    Trophy Points:
    180
    #5
    Nice response... I tackled this issue before by making the image the background property of a DIV... Definitely not the most semantic solution, but it worked...
     
    tarponkeith, Jan 8, 2009 IP