CSS: truncating a row of images to the same height

css, html, image

Solution

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

Problem

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.

Original source

Related problems