Displaying cleanly aligned rectangular thumbnails within square DIVs?
Posted on 2008-02-06
I am creating a photo gallery. On the thumbnails page I am outputting rectangular thumbnails - the same size but some are portrait orientation and some are landscape orientation.
So far each thumbnails is being output like this:
<div style="display: inline;"><a href="link_to_big_image.jpg"><img src="rectangular_thumbnail.jpg" width="250" height="170" /></a></div>
So the thumbnails are up against each other and wrapping around onto multiple lines.
What I want to do is wrap each image in a square div (250x250 pixels), horizontally and vertically align the image within the div, give the div a 1px solid white border, and space each div by about 6 pixels.
I have done this before using a table but in this case I want the number of thumbnails per line to be automatically determined based on how much space there is to fill.