title: CSS: truncating a row of images to the same height
body: <p>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 <code>&lt;img width="128px" ...&gt;</code></p>
  
  <p>Most images have a 4x3 ratio, so they grid quite nicely over several rows.</p>
  
  <p>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).</p>
  
  <p>I've tried specifying CSS <code>img { max-height="128" }</code> but of course that is giving me the undesired scaling.</p>
  
  <p>So:  how can I specify a maximum height that will cause the image to truncate and not scale?</p>
  
  <p><strong>update:</strong> thanks all, I've added an example below.</p>