How to use clip to only show the top 200px of an image?

I am dealing with Facebook profile images, and their height can vary a lot in size. I am trying to use the clip CSS property to only get a maximum of 200px of the image. Here is what my CSS looks like:

.fixed {
  position: relative;
  padding: 10px;
  background-color: #555555;
}

.inner {
  position: absolute;
  clip: rect(0 0 200px 0);
}

Here is the actual开发者_高级运维 HTML:

<div class="fixed"> 
  <div class="inner">
    <img src="large.jpg">
  </div> 
</div> 

No image is being displayed. It works without the clip, but I only want the top 200px of an image. Thanks!

Your rect has no width so you won't see anything. Specify a value for the right dimension, for example, and you should be able to see it:

.inner {
  position: absolute;
  clip: rect(0px, 200px, 200px, 0px);
}

These values sometimes get confused with positioning values - think instead of where the sides of the rectangle would be based on the pixel values you assign - the left side is at 0, the right side is at 200, the top is at 0, the bottom is at 200.

.inner {
  overflow:hidden; 
  max-height:200px
}

It'll work on more browsers than clip.