Resize large image to fill defined space without stretching

Question

Hi,

I'm attempting to make a 2x2 grid with each cell 300x300px. Each cell has an image, which fades in and out, reloaded using AJAX ( jQuery to be precise) - creating a 4 image gallery over ajax. All images are simply dumped into a folder, so there is no defined height or width of them.

Is there any way by which I can have the fill the space? eg, a portrait shaped image would resize to height=300, while its width might be smaller... and similarly for a landscape image ( width=300 with smaller height)? I'm trying to eliminate any resizing of the cells, because it is rather horrible to watch.

I"ll leave centering these vertically and horizontally till later. Thanks for any help!

UPDATE: I've pastebin'ed the current code http://pastebin.com/Hz4fJk9p

Answer 1

Use max-height:300px; and max-width:300px;, assuming your image is not smaller than 300px in both dimensions to begin with.