How to hide part of the image?

You can use the max-height property to specify the maximum height of the image, and then use overflow: hidden; to hide anything else.

e.g.

HTML:

<div class="image-container">
  <img src="some-image.jpg" />
</div>

CSS:

.image-container {
  max-height:100px;
  overflow:hidden;
}

JSFiddle Sample: http://jsfiddle.net/3jA9q/

EDIT

For internet explorer 6, you can use CSS expressions to emulate something similar:

.image-container {
  height:expression(this.scrollHeight<100?"auto":"100px");
  overflow:hidden;
}

Do note however that this requires that the user have JavaScript enabled in their browser. My experience with CSS expressions however have been pretty poor, and they're best avoided.

You can do it using a combnation of max-height and overflow.

HTML:

<div>
    <img>
</div>

CSS:

div{
    max-height:100px;
    overflow:hidden;
}

Also note that max-height doesn't work in older browsers, but if you used normal height then images could never be shorter than 100px either.