SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Wizard Busch's Avatar
    Join Date
    Jan 2004
    Posts
    1,072
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question max-width, max-height alternatives?

    Hi,

    I am trying to format a page with images that I didn't submit. The images come in all different sizes and shapes. 300X30 pixels and 50X450 pixels is not unusual.

    Is there anyway that I can constrain the images without relying on max-width/max-height? If I only use max-width and max-height, on the browsers that don't support those attributes, there's a potential that the images could break my layout.

    I also don't want to use php's getimagesize() because it tends to slow down a page load when you are viewing a list of thumbnails.

    I would love to have a box say 200px by 200px and for images to fit that box without being stretched, distorted or overflowing. Is this possible?

    Any ideas of what I can do?

    Thanks,
    Eric

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,485
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Any ideas of what I can do?
    Why don't you just set overflow:auto on the 200px x 200px element and then if bigger images are input then scrollbars will appear on that element to protect the layout. If the images are normal size then no scrollbar will appear.

    After all this is what overflow was meant for

  3. #3
    SitePoint Wizard Busch's Avatar
    Join Date
    Jan 2004
    Posts
    1,072
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i considered that but i was looking for a more aesthetically pleasing approach. but if you're stumped, then there might not be another approach...

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,485
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Well just hide the bits that are too big with overflow:hidden.

    What other approaches can there be? Either the thing fits or it doesn't

  5. #5
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,863
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    overflow:hidden seems the simplest solution.

    What browser doesn't suoort max-width and max-height (apart from IE6 which has its own way of being able to specify that anyway).
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  6. #6
    SitePoint Wizard Busch's Avatar
    Join Date
    Jan 2004
    Posts
    1,072
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i was referring to IE6 but I didn't know there was another way to specify max-width/height. how do you do it with IE6?

    thanks,
    eric

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,485
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    i was referring to IE6 but I didn't know there was another way to specify max-width/height. how do you do it with IE6?
    You could use an expression for IE to apply synamic styles.

    e.g.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    .test img {min-width:200px;max-width:400px}
    
    </style>
    <!--[if lt IE 7]>
    <style type="text/css">
    
    .test img {
        width: expression(this.width > 400 ? 400 +"px": this.width < 200 ? 200 +"px" :true);
    }
    </style>
    <![endif]-->
    </head>
    <body>
    <ul class="test">
        <li><img id="minmax" src="images/zimg4.jpg"  alt="Example image" /></li>
        <li><img src="images/volcano-2.jpg" alt="Example image" /></li>
        <li><img src="images/shadowimg.png" alt="example" /></li>
        <li><img src="images/checkmark.gif" alt="test" /></li>
    </ul>
    </body>
    </html>
    Won't work if javascript is disabled of course.


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
  •