[AnimusImmodicus]

Hello everyone, let me explain my problem.

I am currently working on a project that requires me to dynamically generate web-pages using images stored in a database. All of these images are of different sizes and aspect ratios, which I believe is the source of my problems. An even bigger part of my problem is that this is not a standard website. The concept behind this project is for the website to be displayed fullscreen without ever needing scrollbars and it should look good on any resolution 1024x768 or higher. So, to do this, I've designed a rather static layout that may expand only horizontally to fill out the page. I've also then of course, needed to give these images a place on each page. So for example, one page I use loads 3 images side by side horizontally (each contained within seperate divs). To ensure that the page does not need scrollbars I have given the images a max-height and max-width. I had to use max-height and max-width instead of height and width b/c the images become distorted / skewed this way. So now we finally arrive at the problem. All of the images will of course end up being slightly different sizes due to the different aspect ratios.

For example: (using max-height & max-width = 400px)

Before Scaling:
Image1: 800px by 200px
Image2: 400px by 800px

After Scaling:
Image1: 400px by 100px
Image2: 200px by 400px

So this of course is visually unappealing to have images of different heights all being vertically aligned to the top of each div. I would like to align these images to the middle. However, everything I have read about this says that the image height value must be known or absolute positioning and negative-margins may be used. What I don't understand is why the height is not known while using max-height? But that aside, is there any workaround? I have already thought of one but I definitely don't want to go that route because it would involve dynamically generating CSS files (with known heights and widths) for each dynamically generated presentation.

Any suggestions and all help is fully appreciated.


EDIT: I also would like to mention that I do know that tables are capable of this functionality. However, I would like to avoid them at all costs because they cause other problems with the layout and they also conflict with other functionality. Functionality such as clicking on an image and having it popup on top of everything else larger by expanding the div using javascript. So essentially I am trying to put oil and water together I think. But still, I'm sure some of you may be capable. lol

EDIT2: I found something useful that uses JQuery. I'm not familiar with JQuery though so I would still appreciate alternative suggestions. Thanks.

This post has been edited by AnimusImmodicus: 04 June 2009 - 08:58 AM

[gregwhitworth]

Are you talking about centering the image within the image container or vertically centering it within the column, your title and main body seem to contradict - unless I'm reading one of them wrong.

--

Greg

[AnimusImmodicus]

Vertically centering it within the each container (div). There are 3 of these containers placed side by side (using float: left) and all contained within a parent container (div). Is this what you were asking?

[gregwhitworth]

Then you have a few options -

You can set up your images to a fixed height and width so that they match each other respectively.

Or you can create the images by placing them as background images of the divs, this will allow the heights and widths to be set by the div and the image is just moved around inside of the container (but they will all be the original size)

Finally, the hardest of the three - write a javascript that get the available screen width and based on that produce 1 of x images to be displayed. This will give you some control over the look but it won't be completely liquid.

--

Greg

This post has been edited by gregwhitworth: 04 June 2009 - 09:23 AM