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 wh

Solution 1:

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.

Solution 2:

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

It'll work on more browsers than clip.