I am trying to display images of varying height and width in thumbnails of fixed dimensions. To achieve this, i am attempting to resize the image without affecting the aspect ratio, and then hiding the parts of the image that overflows from the thumbnail height and width.
I tried using "overflow:hidden" css property on the thumbnail class, but the supposedly overflowing parts of the pictures still appeared nevertheless.
Here is a js fiddle of my dismal attemp to prevent the thumbnail from showing overflows http://jsfiddle.net/smallfonts/ARn4N/
I have also come across this gem of an article about how to set overflowing parts of an image to be hidden in a thumbnail. However, i could not create the same effect on twitter bootstrap thumbnails.
http://cssglobe.com/post/1305/create-resizing-thumbnails-using-overflow-property/
Thanks!