No streched images?

PHP
1

I have a page where images of products are listed with a setting of the width at 240 and the height at 250.
When the user uploads images they sometimes are larger than my settings.
Is there a way to have the picture fit inside my settings without the image being stretched?
If the user uploads an image that is 300x250 the page is shrinking the height of the image so it fits the 240x250. I would rather have the image cut of at top and bottom, just showing 240x250 of the image.

Is there a way of doing that? I never thought about it before and the page I’m using is a free script I found and I’m just trying to modifying bits and pieces to make it look good.

2

Actually there is a simple way to do it with CSS. You can create a div the size you need, and then set the image as the background image for the div.

You can also do some tricky positioning if you want with that background. In other words you can set the background image to start at 0 0 (top left) of 100% 100% (bottom right) etc etc

example:

<div id=‘my_image’></div>

then in your CSS:

div#my_image {
width: 240px;
height: 250px;
background: #FFF url(customer_image.jpg) no-repeat 0 0;
}

You could also do it with overflow: hidden on the div but that gives you less control over the position of the image.

Here’s an example: http://davidcdalton.com/image.html

and here’s the code behind it:

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>
<html lang='en' xmlns='http://www.w3.org/1999/xhtml' xml:lang='en'>
	<head>
		<meta http-equiv='Content-Type' content='text/html; charset=iso-8859-1' />
		<title>Image test</title>
		<style type='text/css'>
			div#my_image {
			  width: 240px;
			  height: 250px;
			  background: #FFF url(/images/v_1.jpg) no-repeat 0 0;
			  }
			 div#image_two	{
				width: 240px;
				height: 250px;
				overflow: hidden;
				}
			div#image_three {
			  width: 240px;
			  height: 250px;
			  background: #FFF url(/images/v_2.jpg) no-repeat 50% 50%;
			  }

		</style>
	</head>
	<body>

		<p>First using the image as a background - gives you more control</p>
		<div id='my_image'></div>

		<p>Second setting the div to overflow: hidden, you only get the part of the image it can show</p>
		<div id='image_two'>
			<img src='/images/v_2.jpg' width='1280' height='960' alt='guitars' />
		</div>

		<p>Again using the image as a background but changing the background position to 50% 50%</p>
		<div id='image_three'></div>

	</body>
</html>
3

Great. I will try that.