SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    Grumpy Minimalist
    Join Date
    Jul 2006
    Location
    Ontario, Canada
    Posts
    424
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Image should stay a size, but shrink if the container does

    Hi,

    I have several images within divs. The divs are fluid, changing size with the window. I would like my images to stay 190x200 (unless they are already smaller), but if the div shrinks too small, they should shrink with it, maintaining aspect ratio.

    Is this possible?

    Thanks!

  2. #2
    SitePoint Wizard holmescreek's Avatar
    Join Date
    Mar 2001
    Location
    Northwest Florida
    Posts
    1,707
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Take a gander at this. Explains how to scale your images really well...

    http://www.w3.org/Style/Examples/007/figures
    intragenesis, llc professional web & graphic design

  3. #3
    Grumpy Minimalist
    Join Date
    Jul 2006
    Location
    Ontario, Canada
    Posts
    424
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, but that behavior is still not entirely what I want. I would like my image to behave like the second image on that page (the one that expands, "Saint Tropez and its fort in the evening sun"), but I would like to prevent the image from ever becoming large than 190px in width as well. Also, it should be prevented from growing larger than 200px in height.

  4. #4
    SitePoint Addict CaryD's Avatar
    Join Date
    Nov 2006
    Location
    San Diego, CA
    Posts
    389
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This would keep it from growing wider than 190px wide in most browsers, but IE 6 ignores the max-width.

    Code:
    img.scaled {
      width: 100%;
      max-width:190px;
    }
    And adding max-height doesn't keep the image's aspect ratio.


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
  •