homepage Welcome to WebmasterWorld Guest from 54.167.41.199
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Three ways to resize images to fit a DIV
Resize image to fit DIV using classes, the STYLE attribute, or PHP
8bit_Betty




msg:3828595
 8:58 pm on Jan 17, 2009 (gmt 0)

Instead of the using the previously suggested code, which sets the width AND the height to 100%, you would want to set the height to 100% if the picture is vertical but set the width to 100% if it is horizontal. So, you have at least three options:

  1. Two different CSS classes (one for width, one for height).

    <style>
    #img_box{
    width:90%;
    height:90%;
    }
    .resize_horizontal{
    width:100%;
    }
    .resize_vertical{
    height:100%;
    }
    </style>
    <div id="img_box">
    <img class="resize_horizontal" src="path/to/horizontal_image.jpg" />
    </div>
    <div id="img_box">
    <img class="resize_vertical" src="path/to/vertical_image.jpg" />
    </div>

  2. Using the STYLE attribute within the IMG tag to manually set the width or height for each image (essentially the same as #1).

    <div id="img_box">
    <img style="width: 100%;" src="path/to/horizontal_image.jpg" />
    </div>
    <div id="img_box">
    <img style="height: 100%;" src="path/to/vertical_image.jpg" />
    </div>

  3. Warning, exiting browser-side territory!Use a scripting language (below I used PHP, which is a server side language, so make sure your web host supports it) to dynamically determine whether the image is horizontal or vertical, and print either the word "width" or "height" in the STYLE attribute.

    <div id="img_box">
    <img style="[b]<? $img_size = getimagesize('path/to/any_image.jpg'); if ($img_size[0]>$img_size[1]) echo 'width'; else echo 'height'; ?>[/b]: 100%;" src="path/to/any_image.jpg" />
    </div>

    $img_size = getimagesize('path/to/any_image/jpg') sets the variable $img_size equal to an array containing information about the image's size. $img_size[0], then, would equal the width of the image (in pixels), and $img_size[1] would equal the height of the image. The following if...else statement basically says, "If the image width is greater than the image height, put the word 'width' into this HTML tag. Otherwise (if the height is greater than or equal to the width), put the word 'height' into the image tag." That way, only the longer dimension is stretched to 100%.

    If you're using this method with a lot of images, you could turn this into a function:


    [b]<?
    function width_or_height($img_path){
    $img_size = getimagesize($img_path);
    if ($img_size[0]>$img_size[1]) echo 'width';
    else echo 'height';
    }
    ?>[/b]
    <div id="img_box">
    <img style="[b]<? width_or_height('path/to/any_image.jpg'); ?>[/b]: 100%;" src="path/to/any_image.jpg" />
    </div>

    Even better, save the above function in a file called "functions.php" or something like that, and include it in subsequent files that use the width_or_height function.


    [b]<? require_once('path/to/functions.php'); ?>[/b]
    <div id="img_box">
    <img style="[b]<? width_or_height('path/to/any_image.jpg'); ?>[/b]: 100%;" src="path/to/any_image.jpg" />
    </div>

Hope this helps! :)

 

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved