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)
Image1: 800px by 200px
Image2: 400px by 800px
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.
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