CSS: truncating a row of images to the same height

Question

I have a bunch of image thumbnails I'm displaying in a web page. All of the images are 256 pixels wide, and I'm shrinking them 50% with <img width="128px" ...>

Most images have a 4x3 ratio, so they grid quite nicely over several rows.

However, some images are very tall (e.g. 256x1200). I would like to specify a maximum height for these images, but the image must be truncated (i.e. showing only the top part of the image) and not scaled (which would undesirably squish the image).

I've tried specifying CSS img { max-height="128" } but of course that is giving me the undesired scaling.

So: how can I specify a maximum height that will cause the image to truncate and not scale?

update: thanks all, I've added an example below.

Answer 1

Wrap them in a classed div, set the height on the div to 128, and then set overflow: hidden for that class.

Answer 2

Wrap the image in a div, set the div's height and width to what you want. Add a style of overflow:hidden to the div.

Answer 3

Thanks to all who responded... here's an example of the solution.

<div style="max-height: 170px; overflow: hidden;">
    <img width="128" align="top" src="img1.jpg">
    <img width="128" align="top" src="img2.jpg">
    <img width="128" align="top" src="img3.jpg">
</div>

Each of the images taller than 170 pixels is truncated and the images align to the top. I put the style information inline for brevity's sake. In my real code it's in a style section.