Image same size whether vertical horizontal

[tigrou1976]

Hello and thanks in advance,

Here is the problem: I have a dynamic page that shows thumbnails. you can see an example at: http://joselino.com/gallery_pics.cfm?groupID=4

As you can see the images are set to: <img src="mydynamic.jpg" width="150"> If I set the height too I will get a distorted image if the image is another orientation than the set value, like horizontal.

What I need is to have all the photos the same size whether they are vertical OR horizontal.

I have a javascript idea like this: Make a script that loads in the header that preloads all the images, determines thier orientation.
ie: if image1.height > image1.width set image.orientation vertical

Then in the body put a conditional write script saying:

if image1.orientation = vertical write <img src="image1.jpg" height="150">
if image1.orientation = horizontal write <img src="image1.jpg" width="150">

If the basic code exists I can populate the code dynamically.

Maybe sombody has a different idea that is much simpler. Thanks!

[The Little Guy]

I would sugget that you resize the image to a width as close as you can get to 150x150, then crop it to get it exact. (In an image editor such as The Gimp Or PhotoShop)

[bokeh]

Or do it on the fly with PHP.

[tigrou1976]

Thanks guys. Though, I don't know a thing about PHP and my site is for a photographer and he wouldn't really like to have all his photos square.

Maybe there is an ilayer or div function that might control an image area?

[bokeh]

Square photos are normally the sign of a Hasselblad, something no photographer would be ashamed to own.

[LJK]

Hi -
There are also options w/ css - like making a definition list that has a bkgnd. of a set width and height, then the image, a description or link are used for the dt and dd tags. This way, each visually has the same appearance, no matter what orientation the photos are - the ind. def. lists would need to have a float:left; [or right] and afterwards a clear:both; to set the page to rights.

To see an example, use the Definition Lists for an Image Gallery link near the bottom of this page:
http://www.maxdesign.com.au/presentation/definition/index.cfm

Good luck,
El

[Aronya1]

I use Irfanview to save images as thumbnail files. You can set the size you want, choose the images & go. Very fast, easy to use, and FREE.

[kelly23]

Hi,

What I do in that type of situation is take the largest possible width of any of the photos and the largest possible height of any, then make a container image this size (or just a little bit larger) that has the same background color as your web page. You can do this in Photoshop or any other image editing program .

So maybe if your widest horizontal photo is 180px wide, and your tallest vertical photo is 180 px high, and your web page background is white, you would have a white background container that's maybe 200px high x 200px wide (or whatever the largest width and height would be accommodated). Then place each photo into this container and save it. All photos will have the same dimensions (200px by 200px), but when viewed on the web page, you won't see any of the background container, just the horizontal or vertical image even though the actual dimensions of the container might be square.

Did that make any sense? :)