SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Evangelist
    Join Date
    Feb 2005
    Posts
    541
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Problem when resizing images using percentages.

    I am working on an image gallery, and I've run into a bit of a problem with IE.

    Example page: http://www.westeros.org/ASoWS/Gallery/Entry/259/

    Example html: <a href="{image_url}"><img src="{image_url}" width="70%" height="70%" border="0" alt="{title} - Click for full-sized image!" title="{title} - Click for full-sized image!" /></a>

    (the {image_url} & {title} bits are specific to the template system used)

    I am using percentages for the height and width of the image because

    a) the full size doesn't fit within the design of the page

    b) I can't use a fixed 'fake' width and height because the gallery pages are produced dynamically by a template and not all images have the same dimensions

    c) I can't create a medium-sized image in addition to the full-sized and the thumbnails because it would take up too much server space

    The percentage method works fine in Mozilla, but IE (probably due to the what I am using to fake fixed positioning frames in IE) seems to get confused about what to calculate the height from. Any way I could work around this, to get 70% of the image size instead of the window size? Or an alternate way of solving the issue?

  2. #2
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    maybe this is what you need? a image that always fits the container

    http://www.rekkab.com/s/auto-width.htm

  3. #3
    SitePoint Evangelist
    Join Date
    Feb 2005
    Posts
    541
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmm, that looks very interesting, although I can't quite sort out how I would apply it, I must admit. Is there a tutorial/description of it somewhere?

  4. #4
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    there is not much to it

    set the container (div) to a width 400px ? 40em ? and give all images a 100% width
    and no height set, and all images, 1x1px, or 1600x1200px fit the container

  5. #5
    SitePoint Evangelist
    Join Date
    Feb 2005
    Posts
    541
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah, okay.

    That would more or less solve it, I guess, although a fixed width for the container does mean I need to adjust the container to 800x600, instead of being able to use as much width as possible. Or could I make the width of the container a percentage too? I seem to recall that some browsers don't like percentages of percentages.

  6. #6
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    yes that works also, try it
    Last edited by all4nerds; Sep 19, 2005 at 13:26.

  7. #7
    SitePoint Evangelist
    Join Date
    Feb 2005
    Posts
    541
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you, that did the trick!

  8. #8
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    Yes works, big image 700x1000 , maybe try 350x500 optimised maybe even smaller

  9. #9
    SitePoint Evangelist
    Join Date
    Feb 2005
    Posts
    541
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, its a gallery, so people want to see the largest possible images.

    One thing I wonder about, though, is if it is possible to somehow make sure that images aren't shown as larger than they are when using this method. At the moment, I have the container set to 80%, and the image width to 100%, and the result is that some of the smaller images actually get blown up a bit.

  10. #10
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    use a minimum width / size for the images, or try a different container width 60% ?

  11. #11
    SitePoint Evangelist
    Join Date
    Feb 2005
    Posts
    541
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, altering the container's width won't really help, as the image can vary so much in size. No matter how small I make the container, some images might still end up being blown up.

    Hmm ... tricky. Basically, I want them as big as possible on each different screen resolution, but no bigger than they actually are.

    Perhaps a max-width might do it. Though, that just solves it in Mozilla/Firefox, as IE doesn't recognize max-width.

  12. #12
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  13. #13
    SitePoint Evangelist
    Join Date
    Feb 2005
    Posts
    541
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, good point.

    However, it doesn't look like using max-width would work, since that would require an absolute size, and since each image is different, I can't preset and absolute size in the CSS.


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
  •