html code to scale an image for a blog post?

Discussion in 'Web Design and Development' started by sir42, Nov 26, 2008.

  1. sir42 macrumors 6502

    Joined:
    Sep 16, 2003
    Location:
    NY, NY
    #1
    I am trying to post an image to my blog, however I can't figure out how to scale the image to the size of my blog frame. The code that I'm using is:

    Code:
    <a href="http://s262.photobucket.com/albums/ii119/account/?action=view&current=image3.gif" target="_blank"><img src="http://i262.photobucket.com/albums/ii119/account/image3.gif" border="0" alt="Image 3"/></a>
    
    Is there code I can add to this that will automatically detect the width of my frame and scale the picture accordingly?

    Thanks!
     
  2. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #2
    You can scale an image to fit a div (or the like) using CSS. Check out this thread for some of the details. You'll essentially be setting the image attributes to 100% width and height and make sure the parent element has some width and height set, and of course using relative positioning. Again, see link for explanation in part.
     
  3. DaveTaylor macrumors 6502

    Joined:
    Nov 6, 2007
    Location:
    Aberdeenshire, Scotland
    #3
    Another way of doing it is using the width and height syntax in the <img src tag:

    HTML:
    <img src="url" width="" height=""/>
     
  4. SrWebDeveloper macrumors 68000

    SrWebDeveloper

    Joined:
    Dec 7, 2007
    Location:
    Alexandria, VA, USA
    #4
    The behavior people usually want is to scale to fit only when the image is larger than the container. Until all browsers support CSS3 which has max-height and min-height selectors, below is a PHP based solution I've used for years with the following benefits:

    • Scales the image proportionately so the image does not distort
    • 100% server side processed - always looks the same on all browsers
    • No dependency on Javascript
    • No dependency on GD or any other graphics library - 100% native PHP, very fast too
    • Well supported CSS
    Basically the code below creates a div as a container set to the maximum width and height I wish via CSS. Then in one line I display an image where the HTML width and height attributes are returned based on a function I wrote that scales if the image width or height exceeds the maximum. This is a simple example only, obviously in production put the CSS in a stylesheet or in the head tag area.

    PHP:

    print "

    <style>
        div.myimagebox {
            width: 500px; 
            height: 400px;
            margin: 12px;
        }
        .images {border: 1px solid black; background-color: black;}
    </style>

    <div class='myimagebox'>
        <img class='images' src='example.jpg' "
    .SetImageDimensions ("example.jpg",500,400)." border='0' alt='Test image...'>
    </div>

    "
    ;

    function 
    SetImageDimensions ($image_filename,$max_width,$max_height) {

        
    $image_filename=(strpos($image_filename,$_SERVER['DOCUMENT_ROOT'])===false) ? $_SERVER['DOCUMENT_ROOT']."/".$image_filename $image_filename ;
        
        if (
    file_exists($image_filename)) {
        
            
    $size=getimagesize($image_filename);
            if (
    $size[0]>$max_width || $size[1]>$max_height) {
                
    $scale min($max_width/$size[0], $max_height/$size[1]);
                
    $new_width intval(floor($scale*$size[0]));
                
    $new_height intval(floor($scale*$size[1]));
                return 
    "width='$new_width' height='$new_height'";
            }
         else { return 
    "";}
        }
        else {return 
    "";}
    }

    Tested and works. Just change each instance of "example.jpg" to your actual image (.jpg, .gif, .tif, .png, etc.) with relative path. Adjust the CSS as you see fit, match the div width and height as the second and third arguments passed to the function.

    -jim
     

Share This Page