asked on

Resizing a background-image in a div

I have a div that is 600 x 400px. I have a javascript tool that is a gallery it work by changing the background image of the div.

My image is bigger than the div tho, I dont want the div to resize I want the image to fit it without losing proportion. How can I set the background-image of the dive to be no larger that 375px in height.

The images in the div are of various sizes but as this is powered by a simple CMS the images can be of various sizes as the users may not upload small sizes.

Thanks

Ray Paseur

You may have a LOT of cross-browser issues to deal with. Have a look a this:
http://www.quirksmode.org/css/overflow.html

HTH, ~Ray

Ray Paseur

Also this:
http://www.w3schools.com/Css/pr_pos_overflow.asp

glumlun

id recomend either:
educating your admin users to upload correct sizes and add a check on the upload that only allows correctly sized images;
add an image resizing component to your admin;

to address your actual question, does the javascript tool resize the divs? as usually a background image will not 'push' a div so overflow issues should not be an issue.

robertdeboer

You could write a PHP script utilizing the GD extension (although it must be installed with your php installation) to automatically get the size of the image, and if it is beyond x width and/or y height, then resize it to a new x width and y height.

To maintain proportion, you could resize based on percentages, applying the calculated percentage to both x width and y height.

The GD <a href="http://us2.php.net/manual/en/ref.image.php">documentation</a>

Ray Paseur

This function will resize an image. ~Ray

/* ********************************************************************************************* */
/* comment lines will work if GD2 is not installed, but will make poorer images                  */
/*                                                                                               */
// MAKE AN IMAGE INTO THE RIGHT SIZE FOR PAGE DISPLAY
function create_right_size_image($image, $width=720) {
 
	$source = imagecreatefromjpeg("$image");
 
	$imageX = imagesx($source);
	$imageY = imagesy($source);
 
	if ($imageX <= $width) {
return FALSE;
}
	if ($imageX > $width) {
		$tnailX = $width;
		$tnailY = (int) (($tnailX * $imageY) / $imageX );
	} else {
		$tnailX	= $imageX;
		$tnailY = (int) (($tnailX * $imageY) / $imageX );
	}
 
	$target = imagecreatetruecolor($tnailX, $tnailY);
//	$target = imagecreate($tnailX, $tnailY);
	imagecopyresampled ($target, $source, 0, 0, 0, 0, $tnailX, $tnailY, $imageX, $imageY);
//	imagecopyresized   ($target, $source, 0, 0, 0, 0, $tnailX, $tnailY, $imageX, $imageY);
 
return $target ;
}
/* ********************************************************************************************* */

Open in new window

Ray Paseur

Sample calling sequence where $my_new_file is the path to the image in the server file system.

HTH, ~Ray

// RESIZE THE FILE TO FIT WIDTH, IF NECESSARY
if ($imageblob	= create_right_size_image($my_new_file)) 
{
   imagejpeg($imageblob, $my_new_file);
}

Open in new window

ASKER CERTIFIED SOLUTION

Panchux

membership

Create a free account to see this answer

Signing up is free and takes 30 seconds. No credit card required.

See answer