Fitting an image to a size (HTML)

Post Reply New Topic

I want to fit an image into a bounded area on an HTML document, preferably without any scripting or over-elaborate methods. For instance, if I make a DIV with height:100;width:150;overflow:hidden and then place an image with height:100 inside, then a landscape (2:3) image will display fully and a portrait (3:2) image will be clipped to 67x100 within the DIV.

I am prescaling all my images to fit within the available space, i.e. either the width or height is equal to the frame and the other is equal or smaller.

How can I make the image fit in the space, centred and retaining its original aspect ratio?

There are many incredibly elaborate (and seriously ugly) solutions on the net, and I want something pure and simple.

I think you can use float: center for the image and vertical-align: center for the div. I usually post this questions on a programming forum like CodeCall.

Thanks, vertical-align on the div is exactly the answer. I had 90% of the solution and was too tired of it to see the last step.

The answers on programming forums were terrible - how to rewrite the whole problem in dynamic HTML, PHP, VBScript, Javascript etc, etc, with the most gruesome mangling of the problem. What I have now is so simple and works perfectly (it is a cross-linked photo collection, with a scrollable thumbnail listing)