Clipping div's inner content

I have a DIV of size 147x88 and inside it an image which 开发者_Python百科has the same width, but might be larger in height. In this case, the image goes beyond the boundary of the DIV. Is there anyway to clip the image, keeping in mind that I want my page to work in old browsers which doesn't support CSS3 (IE7 and IE8)?

Just hide the overflow of the div, and the containing image will be cropped to the dimensions of the div.

div{width: 147px; height: 88px; overflow: hidden;}

Set overflow:hidden; on the div:

#yourDiv {
width:147px;
height:88px;
overflow:hidden;
}

Example: http://jsfiddle.net/purmou/sN5PL/

div { width: 147px; height: 88px; overflow: hidden; }

This question shows how to get the size of the image using JQuery. You can have a little block that checks the size of the image when loading the page, and the set the size of the DIV accordingly.