taking/resizing photos to fit divs without losing proportion

techguy

Hi,

I have the basic layout designed but am having trouble resizing photos to fit certain divs exactly.

For example:

I have specified a div to show pictures that is 600px x 450px (W x H)

I can't resize a photo I have to fit that exactly or I will lose the poroportion of the photo and will appear distorted.

How do people get around this when designing pages?

Do I need to to setup the camera and sync that setting with my overall page design or something?

Is there any useful guides on this?

I hope I have made my problem clear?

Thanks..

DonkeyStyle \o/

Yeah definitely don't mess with the aspect ratio, it always looks terrible.
You could resize the width or height to target, then crop off the excess.
Or if you're dealing with a large number of images you could try something like Thumbs Plus to batch resize and crop them (afaicr anyway, I haven't used TP in ages).

techguy

yea well the problem is the pictures will be of kitchens so I won't really be able to trim off the edges..

Gordon

Can you use php or some active scripting where you don't have a div with a set dimension but your div will take on the width and height of the loaded image? You could, for example, set the width of every image to 600px (providing they are landscape) and only ever change the height of the div based upon the height of the image.

DonkeyStyle \o/

Hmm, maybe uniformally cropped thumbnails that open in Lightbox would be another option.

Goodshape

Not sure if your design will allow for it, but if you can afford a variable height while still maintiaining the 600px width, you could use :

img { width : 600px; height : auto; }

Malice

techguy wrote: »

Hi,

I have the basic layout designed but am having trouble resizing photos to fit certain divs exactly.

For example:

I have specified a div to show pictures that is 600px x 450px (W x H)

I can't resize a photo I have to fit that exactly or I will lose the poroportion of the photo and will appear distorted.

How do people get around this when designing pages?

Do I need to to setup the camera and sync that setting with my overall page design or something?

Is there any useful guides on this?

I hope I have made my problem clear?

Thanks..

I think I had a similar issue to this, basically a client had a whole load of product images which all had to fit into a specific area. Typically, they were varying dimensions and aspect ratios :mad:.

What we did to get around the issue was define a maximum thumbnail size and fit the image thumbnails to it. The only problem with doing it this way is that if there is a big difference in some of your images you will end up with borders either to the side or the top and bottom (similar to looking at a widescreen film on a non-widescreen television).

I don't know if the code is much use to you as it's ASP but here it is anyway:
Function:
[PHP]
Public Function GetResizedDimensions(ByVal imgWidth, ByVal imgHeight, ByRef newWidth, ByRef newHeight)
Const maxWidth = 96
Const maxHeight = 96

' Temp values for data conversion
Dim tHeight1, tHeight2, tWidth1, tWidth2, scaleFactor

If ((imgWidth > maxWidth) Or (imgHeight > maxHeight)) Then
If ((maxHeight / imgHeight) > (maxWidth / imgWidth)) Then
tHeight1 = maxHeight
tHeight2 = imgHeight
scaleFactor = tHeight1 / tHeight2
Else
tWidth1 = maxWidth
tWidth2 = imgWidth
scaleFactor = tWidth1 / tWidth2
End If
End If

If (imgWidth > maxWidth) Then
tWidth1 = maxWidth
tWidth2 = imgWidth

scaleFactor = tWidth1 / tWidth2

imgWidth = imgWidth * scaleFactor
imgHeight = imgHeight * scaleFactor
End If

If (imgHeight > maxHeight) Then
tWidth1 = maxWidth
tWidth2 = imgWidth

' Reset scaleFactor to avoid an error
scaleFactor = tWidth1 / tWidth2
imgWidth = imgWidth * scaleFactor
imgHeight = imgHeight * scaleFactor

tHeight1 = maxHeight
tHeight2 = imgHeight

scaleFactor = tHeight1 / tHeight2
imgWidth = imgWidth * scaleFactor
imgHeight = imgHeight * scaleFactor
End If

newWidth = CInt(Round(imgWidth, 0))
newHeight = CInt(Round(imgHeight, 0))
End Function
[/PHP]

Calling:
[PHP]
Response.Write("<td colspan=""2""><p class=""tableImage""><a href=""proddetail.asp?prod=" &_
productID(i) & """><img src=""" & productImage(i) & """ border=""0"" alt=""product"" width=""" &_
newWidth & """ height=""" & newHeight & """/></a></p></td>")

[/PHP]

Result:
HTML code similar to this is output to the browser:
[PHP]<a href="product_details.asp?prod=123">
<img src="images/123.jpg" alt="Product Name" border="0" width="96" height="96"/>
</a>[/PHP]

p

I don't understand - why don't you simply crop the images? Resize them to as close as possible and then crop off some extra details around the edges?

If the photos are all supplied and there's too many important details at the edges, then change the design, so your image is in the correction proportion. Generally, if you're working with specific photos (or indeed any kind of content) it's a good idea to get it first and work your design around that.