SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Enthusiast
    Join Date
    Dec 2004
    Location
    Tempe, AZ
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Maximizing image width with CSS

    Is there a way CSS can somehow maximize an image width (and possibly scale the height accordingly)? Our layout is very sensitive to images. If someone links in a large image, it will mess up some things on the layout. So if there was a way to maximize the with of an "img" element, I think that would solve the problem.

    Do you guys have any ideas on this?

    Thank you,

    dombi

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,789
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Hi,

    There is no way to scale images in CSS unless you just set the size of the img container in percentages then the container will expand and contract as required depending on its parent etc.

    However this usually makes the image distorted.

    You could always just set the size of the img to be a set size that fits in with your layout.

    e.g.
    Code:
    img {width:200px;height:200px}
    Again this will not perform any clever scaling and will dstort the image.

    I suppose you could always clip the image so that only part of it shows to fit in with your layout. Other than that you will need to use a script to do the work for you.

    Paul

  3. #3
    SitePoint Evangelist figbeam's Avatar
    Join Date
    Jun 2004
    Location
    Sweden
    Posts
    508
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    "When a replaced element's width is changed from it's intrinsic value, the value of height is scaled to match"
    - Cascading Style Sheets, The Definitive Guide

    which means you can set either width _or_ height and this will scale the image without distortion. Or thats what the book says. Haven't tried it myself, but give it a go.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,789
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Hi,

    figbeam is correct and you could use something like this to make it work:
    Code:
    img {width:300px;height:auto;}
    The above will overide the sizes set in the img tags html. The height will scale to the correct proportions for the width.

    However if you have an image that is say 10px x 200px then the 200px height will be scaled to 6000px. The image scaling by the browser is also a little bit rough though.

    Thanks figbeam for pointing this out

    Paul

  5. #5
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    img {max-width: 100%;}
    Simon Pieters

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,789
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by zcorpan
    max-width
    Unfortunately IE spoils the party again because it doesn't understand max-width .

  7. #7
    SitePoint Enthusiast
    Join Date
    Dec 2004
    Location
    Tempe, AZ
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I had a feeling that this would not be possible without any problems. I use CSS scaling, if it only scaled large images down, but not small ones up. I think the solution is to parse the text field, look for img tags, pull out the necessary info (height, width) and scale them accordingly...
    Now I just have to figure out a way with php to find out dimensions of an image stored on a different server. I know that is a different topic, but maybe someone knows some good source for this...

    Thank you for all the input so far, you guys have been very informative and helpful.

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,789
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Don't know if this is of any use

    http://uk.php.net/getimagesize

    Paul


Bookmarks

Posting Permissions

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