html code to scale an image for a blog post?

[sir42]

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:

<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!

 

[angelwatt]

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.

 

[DaveTaylor]

Another way of doing it is using the width and height syntax in the <img src tag:

<img src="url" width="" height=""/>

 

[SrWebDeveloper]

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.

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