JQuery carousel images trim

Question

Using the TinyCarousel program I created the following sample page. http://www.dealred.com/wa/jqimage.htm

The carousel is working fine, but as I have less space on the home page, we need to reduce the height of the carousel without reducing the thumbnail sizes.

Actual thumbnail size: 175x175 Carousel image size: 140x140 Required image size: 116x140 (do not show the top 12px and bottom 12px of the image). This will save us 24 pixels height and at the same time no compromise on the quality.

I created a sample requirement in photoshop. Please check it.

Is it possible to achieve this by using CSS or JQuery. Please help with the code. Thanks.

Answer 1

You could make a wrapper div around the image put a overflow: hidden; on it and define the height. And position the thumb -12px to the top.

Answer 2

Don't know if you'll like my answer, but I would just setup an action in Photoshop and crop all of the thumbnails. I can't think of an easy way to 'crop' the thumbnails unless they were set as background-image in a div or something.

Curious to hear if someone more experienced than I has a solution though.