Take the 2-minute tour ×

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.

share|improve this question
add comment

3 Answers

up vote 6 down vote accepted

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

share|improve this answer
I think you meant overflow: hidden –  Rob Van Dam Jan 9 '10 at 6:34
You are correct sir. –  Myles Jan 9 '10 at 6:40
add comment

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.

share|improve this answer
add comment

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">

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.

share|improve this answer
Note: align attribute on <img> is not supported in HTML5 and is deprecated in HTML 4.01 –  Evereq Oct 2 '12 at 9:35
@EvereQ, what is the recommended replacement? –  Mark Harrison Oct 2 '12 at 16:44
it has been deprecated in favor of style sheets (CSS) - use 'vertical-align' in CSS instead :) –  Evereq Oct 9 '12 at 12:21
add comment

Your Answer


