I have set the DIV height to 300px which cross-browser appears to work best.
Lets say I have 5 images at 250px high these will fit inside the DIV. However if I have 5 images at 350px high the image is taller than the DIV so it goes over the border of the DIV.
If the image is 250px and I increase the DIV height to 360px then in some browsers their is a huge gap at the bottom.
If I fix the height of the image to height: 100% it works perfectly in IE and Firefox. However in Chrome it squashes the image to just a few pixels if the height of the DIV is not fixed elsewhere on the site.
For example the logo will squash up. But I cant do this because different browsers treat the height differently.
It just seems catch-22.