Setting overflow property with twitter bootstrap thumbnails

Question

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!

Answer 1

Is this what you need : http://jsfiddle.net/ARn4N/10/